React Component populate Item component props from Json data

Question

I have a React component which list items from the Item component.

Below you can see how it looks.

const ListHolder = () => (
  <div>
    <div className="panel">
      <div className="panel-heading">
        <h3 className="panel-title">List Title</h3>
      </div>
      <div className="panel-body">
        <Item
          title="A Title"
          desc="Desc 1."
        />
        <Item
          title="Another Title"
          desc="Desc 2."
        />
        <Item
          title="Some of title"
          desc="Desc 3."
        />
      </div>
    </div>
  </div>
);

export default ListHolder;

Item components are currently hardcoded.

How can I populate / insert the data from some Json data?

mfirry · Accepted Answer · 2017-04-19 22:00:14Z

1

If you pass your items data as props of your component, you could do something like:

const ListHolder = ({items}) => (
  <div>
    <div className="panel">
      <div className="panel-heading">
        <h3 className="panel-title">List Title</h3>
      </div>
      <div className="panel-body">
        { items.map((item) => <Item title={item.title} desc={item.desc} />)}
      </div>
    </div>
  </div>
);

~ EDIT after first comment ~

That is if you can use so called

Otherwise the "usual" way can look something like:

class ListHolder extends React.Component {
  render() {
    const items = [{ "title": "title", "desc": "some desc" }, { "title": "title2", "desc": "some other desc" }];
    return (
      <div>
        <div className="panel">
          <div className="panel-heading">
            <h3 className="panel-title">List Title</h3>
          </div>
          <div className="panel-body">
            { items.map((item) => <Item title={item.title} desc={item.desc} /> )}
          </div>
        </div>
      </div>    
    );
  }
}

edited Apr 19, 2017 at 22:00

answered Apr 19, 2017 at 21:41

mfirry

3,6901 gold badge30 silver badges38 bronze badges

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

1 Comment

user7801216 Over a year ago

How I add this example data in a variable before the component? { "title": "title", "desc": "some desc", }, { "title": "title2", "desc": "some other desc", }

Collectives™ on Stack Overflow

React Component populate Item component props from Json data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related