Render an Object in React

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

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?