Render an Object in React

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

  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 />

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.

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.

markdown_Forums

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.

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?

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.

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.