CODEWITHSUNDEEP
reactjs
be-codified
be-codified

Reputation: 6124

React - passing object through props

I am new to React and trying to pass object through attributes but getting following error.

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {title}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of MeetingComponent.

Here is my code:

Main.jsx

import React from 'react';
import MeetingComponent from '../components/Meeting.jsx';

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

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

AppComponent.defaultProps = {};

export default AppComponent;

Meeting.jsx

import React from 'react';

class MeetingComponent extends React.Component {
    render() {
        return (
            <div>{this.props.dataMeeting}</div>
        );
    }
}

MeetingComponent.defaultProps = {};

export default MeetingComponent;

How can I solve this? What is the best practice?

Upvotes: 20

Views: 43265

Answers (5)

M2395
M2395

Reputation: 366

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>

Upvotes: 4

Piotr Karbownik
Piotr Karbownik

Reputation: 201

  static propTypes = {
    pieChartSortSettings: PropTypes.shape({
      type: PropTypes.string.isRequired,
      order: PropTypes.string.isRequired,
    }),
  };

Here is a example how to pass object in props. You can also checkout methods like: PropTypes.arrayOfand PropTypes.objectOf(more: https://reactjs.org/docs/typechecking-with-proptypes.html)

Upvotes: 0

Saiful Islam
Saiful Islam

Reputation: 11

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>
        );
    }
}

Upvotes: 1

Egor
Egor

Reputation: 680

Best practice is make your props as plain as possible, in your case it may be

<MeetingComponent title={ meeting.title } />

class MeetingComponent extends React.Component {
propTypes = {
   title: React.PropTypes.string.isRequired
}
render() {
    return (
        <div>title: { this.props.title }</div>
    );
  }
}

And always use propTypes for better warning messages

Upvotes: -4

QoP
QoP

Reputation: 28397

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>

Upvotes: 27

Related Questions