React-Modal "Objects are not valid as a React child"?

Question

Have a look at the following code.

import React from 'react';
import Modal from 'react-modal';

const OptionModal = (props)=>(
    <Modal
    isOpen={!!props.selectedOption}
    contentLabel="Selected Option"
    >
    <h1>Selected Option</h1>
    {props.selectedOption && <p>{props.selectedOption}</p>}
  </Modal>
);


export default OptionModal;

Also selectedOption contains the randomly selected string.

When I use {props.selectedOption && <p>{props.selectedOption}</p>} it gives the error "Objects are not valid as a React child (found: object with keys {option}). If you meant to render a collection of children, use an array instead.". Not using this my code is working properly. Please help me fix this

Answer 1

When you use

{props.selectedOption && <p>{props.selectedOption}</p>} 

this part reterned props.selectedOption if is it not null and not boolean. so Change it to

{!!props.selectedOption && <p>{props.selectedOption}</p>} 

to convert it to boolean.

Full code:

import React from 'react';
import Modal from 'react-modal';

const OptionModal = (props)=>(
    <Modal
    isOpen={!!props.selectedOption}
    contentLabel="Selected Option"
    >
    <h1>Selected Option</h1>
    {!!props.selectedOption && <p>{props.selectedOption}</p>}
  </Modal>
);


export default OptionModal;