Dynamic rendering in React

Question

I have the following array:

const elements = [
    {
        title: "foo"
        section: <div>Foo <button onClick={sayHello}>Greet</button></div>
    },
    {
        title: "bar"
        section: <div>Bar <button onClick={sayHello}>Greet</button></div>
    }
];

I want to render the component with something like:

const someSections = this.state.elements.map((item, i) => (
    <div key={i}>
    {item.section}
    </div>
));

...

render(){
    return (
        ...
        <div>
            {someSections}
        </div>
    )
}

But I can't render them. The error is:

Uncaught Error: objects are not valid as a React child

item.section, not link.section in your map :D

Alexandre Nicolas
– Alexandre Nicolas

2017-02-24 14:15:29 +00:00
Commented Feb 24, 2017 at 14:15 — Alexandre Nicolas
– Alexandre Nicolas, Commented Feb 24, 2017 at 14:15
Your data really shouldn't contain HTML, only the templates

Ruan Mendes
– Ruan Mendes

2017-02-24 14:25:50 +00:00
Commented Feb 24, 2017 at 14:25 — Ruan Mendes
– Ruan Mendes, Commented Feb 24, 2017 at 14:25

Mayank Shukla · Accepted Answer · 2017-02-24 14:35:26Z

1

Check the working solution:

const data = [
    {
        title: "foo",
        section: <div>Foo <button>Greet</button></div>
    },
    {
        title: "bar",
        section: <div>Bar <button>Greet</button></div>
    }
]


class App extends React.Component{
  render(){
     return(
        <div>
          {
              data.map((item,i)=>{
                  return <div key={i}>{item.section}</div>
              })
          }
        </div>
     )
  }
}

ReactDOM.render(
    <App/>,
    document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'></div>

edited Feb 24, 2017 at 14:35

answered Feb 24, 2017 at 14:22

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aprilmintacpineda · Accepted Answer · 2017-02-24 14:51:12Z

1

normally you would do something like this.

render(){
    let someSections = this.state.elements.map((item, i) => (
        <div key={i}>
            {item.section}
        </div>
    ));

    return (
        <div>
            {someSections}
        </div>
    )
}

answered Feb 24, 2017 at 14:51

aprilmintacpineda

1,28215 silver badges22 bronze badges

Collectives™ on Stack Overflow

Dynamic rendering in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related