React - passing object through props

The problem is here

 <div>{this.props.dataMeeting}</div>

You cannot render an object in React, maybe you were trying to do

 <div>{this.props.dataMeeting.title}</div>

i've used this method to pass object through component

   let meeting = {
  title: 'Some title'
};

class AppComponent extends React.Component {
    render() {
const jsonData =JSON.stringify(meeting);
        return (
            <div className="index">
                <MeetingComponent dataMeeting={jsonData } />
            </div>
    );
  }
}


class MeetingComponent extends React.Component {
    render() {
const data = JSON.parse(this.props.dataMeeting);
        return (
            <div>{data}</div>
            <div>{data.title}</div>
        );
    }
}

If you want to pass properties of an object , it can be done as follows:

<MeetingComponent {...meeting} />

To access title of the meeting object inside the Meeting component, you can do it by calling it directly this.props.title

You can render it as <div>{this.props.title}</div>

Tags:

Reactjs