Render an Object in React

Render an Object in React
0

#1

So I’m trying to render data from an object, and I need to pass the object as a prop to the component. My strategy has been to use the .map() method to map over the Object.keys() array. However, when I attempt to pass in {props.data} to the method I’m using to do this, I get an "Unexpected token, expected , " error. But when I put in props.data without JSX brackets (as I do in the code below), no error gets thrown. However, the entire component fails to render. So I’m kind of stuck between a rock and a hard place. Is there something obvious I’m missing here? Thanks!

const data = {
object1: {
name: 'name1',
},

object2: {
name: 'name2',
} 

}


class Center extends React.Component {
  constructor (props){
    super (props)
    this.renderObj = this.renderObj.bind(this);
  }
  
  // methods
  
  renderObj = () => { 
    Object.keys(props.data).map((obj, i) => {
      return (
        <div>
          {props.data[obj].name}
        </div>
      )})}


  render () {
    return(
    <div>
        {this.renderObj()}
        <h1>4</h1>
    </div>
    )
  }
}


class App extends React.Component {
  constructor (props){
    super (props)
  }
  render () {
    return(
    <Center data={data} />
    )
  }
}


ReactDOM.render(<App/>, document.getElementById("root"));


#2
  renderObj = () => { 
    Object.keys(props.data).map((obj, i) => {
      return (
        <div>
          {props.data[obj].name}
        </div>
      )})}

In the above method, you have a couple of problems.

#1) Nothing was passed to props, so you would not have anything in props. You can simply reference data like:

Object.keys(data).map((obj, i) => {

#2) Your renderObj function does not actually return a value, so you need to add the return keyword in front of Object.keys.

Honestly, based on your structure Center can just be a Stateless Functional Component (SFC) which looks like:

const Center = () => (
  <div>
    {Object.keys(data).map(obj => <div>{data[obj].name}</div>)}
    <h1>4</h1>
  </div>
);

Since data is a global variable, you do not need to pass it via the App component, so your render just becomes:

render() {
  return <Center />;
}

And finally, since you are not using state in your App component, it also can be a SFC.

const App = () => <Center />

#3

Ok, that all makes sense. Eventually, I’ll need to be using different sets of data, which is why I was planning to pass the object in as a prop. In that case, I don’t think I’ll be able to use the SFC approach. Also, I tried rewriting to component using your advice, like so, and while the h1 tag is rendering, the object keys aren’t.

 renderObj = () => {
    return
    Object.keys(data).map((obj, i) => {
      return (
        <div>
          {data[obj].name}
        </div>
      )})}

Furthermore, I did pass in data as a prop in the rendering above, so why isn’t that prop accessible?

Apologies for the barrage of questions.


#4

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

Note: Backticks are not single quotes.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#5

Make sure you always put the value you want to return on the same line as the return key word, otherwise undefined is returned and the function exits.


#6

Oh, right. That’s a silly mistake. Is there a key to passing props into this type of function? I’ve edited my code according to the suggestions and got it to render, but only when I use a global variable. Ideally I need to be able to pass props in.

I’ve tried this:


const Cdata = {
object1: {
name: 'name1',
},

object2: {
name: 'name2',
} 

}


  renderObj = () => {
    return Object.keys(props.data).map((obj, i) => {
      return (
        <div>
          {(props.data)[obj].name}
        </div>
      )})}

With

<Center data={Cdata} />

In the parent component.

I’ve also tried wrapping props.data in JSX braces with no luck. Am I missing something obvious?


#7

Please use 3 backticks and not 3 single quotes when formatting your code. I have replaced all instances of the 3 single quotes with 3 backticks, so your code displays on the post.


#8

Your latest question will depend on if Center is an SFC or regular React component.

If it is an SFC, then you will use props.data inside renderObj. If it is a regular React component, then you will use this.props.data inside renderObj.

If you are still having trouble, please repost all of your latest code or better yet, use Codepen, so I can always see your latest code without you having to repost or explain every single change you have made.