Why can't I render data from this object ? How can I? (react/redux)

JavaScript
1

Hello,

I have a component “Form”. I also have some data that I get from the DB, and whose state (myData) I dispatch.

So in the Form component, I have a mapdispatchtoprops function to convert myData to props.
myData is an object.

I want to use the data from the myData object and display some of the properties of that object in the return function of the component.

When I type this in the render method :

	const  {myData}  = this.props;

	console.log(myData);

I can see my object in the console, the way i want.

{myData} looks like this :

{ title: "mytitle", comments: [{comment: "qqq", vote: 1}, {comment: "www", vote: 2}]}

However, for some reason I don’t understand, I cannot use {myData} in the return method of the component. When I do, I get the following error message :

Objects are not valid as a React child. 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

I understood you cannot use objects in the return method. But it’s an object that I have, not an Array.

I expected I could write this in my return method : {myData.title} to see “mytitle” when my component renders.

2

Do you mean “render method” not “return method”? What kind of JSX tags are wrapping “{myData.title}”?

3

Sorry, I may have phrased it wrongly. I mean in the return of the render method indeed.

render(){

  const  {myData}  = this.props;

  console.log(myData);

  return(

  <div>{myData.title}</div>

  )

If I write : {myData}, i get the error message as copied in the original post, if I write : {myData.title}, I have an error message telling me that myData is undefined.

4

What happens if you just write:

render() {
    return <div>{this.props.myData.title}</div>;
}
5

same same :

this.props.myData.title is undefined

6

Do you have your full code at a repository that I could look at?

7

this works :

render() {
    return <div>{myData && myData.title}</div>;
}

but it does not entirely solve my problem. I need to manipulate the data from the myData object.

What happens is the console log first returns ‘undefined’, then webpack-hot-midleware connects ([HMR] connected), then only the console log shows the object. So, the error message I get is because it will check the props before HMR is connected, and see it as empty.

9

ok, I finally got why it was not working. (phew…). Thanks to a lot of research and some similar issues posted on SO. Explanation below if that can help anyone else.

So what happens is that myData object is returned empty in my component lifecycle. I fetch data from the server, and this operates in the API lifecycle, independently. My component renders before I get the data in myData object. So, of course, it is empty and {myData.title} in the return returns undefined.

A solution is to define myData in the render method as follows :

let myData = this.props.myData || {}

The above will return an empty myData object at first, then once I fetch the data to myData object, the component will re-render and {myData.title} in the return will display the title as expected.

This all makes sense with what the browser’s console will show you if you add a console log in the render method. It will first show :

Object { }

[HMR] connected

Object { title : "blabla, comments: "blabla" }
1 Like
10

I am facing kind of similar problem. I have posted it here - ttps://www.freecodecamp.org/forum/t/an-array-is-returned-in-solidity-how-do-i-recieve-it-in-app-js-file-using-react/298625

Any help would be appreciated!