对象在将道具从一个组件传递到另一个组件时，不能作为反应子对象（带有键的找到的对象）有效

Question

I am passing a particular selected URL(data) from a component (List.js) to a component (DD.js), DD.js has two components, Left and Right, I want to display data in the Left component so have passed the props to left component, but I get the error saying

Objects are not valid as a React child (found: object with keys {url})

. If you meant to render a collection of children, use an array instead.

DD.js

export default class DD extends Component {
  render(){
    let data = this.props.location.state
    return(
      <div className="dd-wrapper">
        <div className="left-drawer-wrapper">
          <Left url={data}/>
        </div>
        {/*right side section*/}
      </div>
    );
  }
}

Left.js

export default class Left extends Component{
  render(){
    let url = this.props.url
    return(
      <div>
        {url}
      </div>
    );
  }
}

List.js

<tbody>
 {
   this.state.urls.map( (list,i) => {
   return(
     <tr key={i}>
       <td>
        <Link to={{pathname:`/service/${this.service_name}/requests`,
                        state:{url:this.state.urls[i]}}}
                        onClick={()=>this.selectedUrlHandler(i)}>{list} 
        </Link>
       </td>
       <td>{this.service_name}</td>
      </tr>
     );
   })
  }
</tbody>

I get the requested answer when i do console.log(url) , but when i remove it and do just {url} , the error occures , not sure what is going wrong .

Answer 1

Since the url is passed an an object to the Left component which tried to render it you get an error. Instead just render the particular property of the state object like

export default class DD extends Component {
  render(){
    let data = this.props.location.state
    return(
      <div className="dd-wrapper">
        <div className="left-drawer-wrapper">
          <Left url={data}/>
        </div>
        {/*right side section*/}
      </div>
    );
  }
}

---

export default class Left extends Component{
  render(){
    let url = this.props.url.value
    return(
      <div>
        {url}
      </div>
    );
  }
}

Answer 2

You can not render an object as a children of a node in react component. To do so, you can stringify the object ie

export default class Left extends Component{
 render(){
  let url = this.props.url
  return(
    <div>
      {JSON.stringify(url)}
    </div>
  );
 }
}

OR

You can render a particular value at a time from the object.

export default class Left extends Component{
 render(){
  let url = this.props.url
  return(
    <div>
      {url.url1}
      {url.url2}
    </div>
  );
 }
}

Answer 3

The url is not a string it is an Object and react can not render Objects in JSX. You can check that by converting that to string.

<Left url={JSON.stringify(data)} />