reactjs - React: how to pass a object inside a child component? -

i new on react , have problem. have notification system envelope inside component. component need send object contains message , level of message.

i have component on top level of app. want child components can access notification component.

for example, if have login component , login fails, want call notification:

 handlesubmit(data){     var self = this;     //console.log(data);     authservice.signin(data)     .then(function(response){         console.log(response);     })     .catch(function(error){          self.props.onshownotification({             message: error.response.data,             level: 'error'         })         console.log(error.response.data);     }) } 

on parent component:

      constructor(){     super()      this.state = {       notificationobject: {}     }      this.handlenotification = this.handlenotification.bind(this);   }    handlenotification(notificationobject){     this.setstate({       notificationobject: notificationobject     })   }    render() {     return (       <div classname="full-height">         {this.state.notificationobject.message && <notifications notificationobject={this.state.notificationobject}></notifications>}         <login onshownotification={this.handlenotification}></login>       </div>     );   } } 

and notification component:

    constructor(props){     super(props) }   componentdidmount() {     this._notificationsystem = this.refs.notificationsystem;     console.log(this.props.notificationobject)     this._notificationsystem.addnotification({         message: this.props.notificationobject.message,         level: this.props.notificationobject.level     }); }  render(){     return(         <notificationsystem ref="notificationsystem" />     ); } 

the problem got error:

uncaught (in promise) error: objects not valid react child (found: object keys {error}). if meant render collection of children, use array instead or wrap object using createfragment(object) react add-ons.

an image see better this:

i have read lot of other questions none of them can me.

can me?

as said in comments, problem due fact property error.response.data not "valid react child". property passed notificationsystem component (https://github.com/igorprado/react-notification-system), may try render string.

the solution pass real string instead of error.response.data.