Render array data in class i react

Question

I have to make a card.

For that I need to make 3 components.

First for Card Header
Second for Card Description and
Third for main Card that will give values to both components.

In my Card class I want to display the array data. I have no idea how to do that.

I believe I should use map() but I do not understand how.

My structure should be like Card header1 with Card description1 then Card header2 with Card description2.

<!Doctype html>
<html>

<head>
  <title>React Cards</title>
  <link rel="stylesheet" href="screen1.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>

<body>
  <script type="text/jsx">
    class Header extends React.Component { render () { return (
    <div className='t1'>
      <h1>{this.props.text}</h1>
    </div>
    ) } } class CardDesc extends React.Component { render () { return (
    <div className='t2' id='this.props.id'>{this.props.text}</div>
    ) } } class Card extends React.Component { render () { return (
    <div className='t3'>
      <Header text="this.props.head" />
      <CardDesc text="this.props.des" />
    </div>
    ) } } var cardContent = [ {head:'Header one',des:'000'}, {head:'Header two',des:'001'},
    {head:'Header three',des:'002'}, {head:'Header four',des:'004'}, {head:'Header
    five',des:'005'}, {head:'Header six',des:'006'} ]; ReactDOM.render(

    <Card />, document.getElementById('root'))
  </script>
  <div id="root"></div>
</body>

</html>

Possible duplicate of Render an array in ReactJs

Shubham Khatri
– Shubham Khatri

2017-08-25 07:46:50 +00:00
Commented Aug 25, 2017 at 7:46 — Shubham Khatri
– Shubham Khatri, Commented Aug 25, 2017 at 7:46

MrCode · Accepted Answer · 2017-08-25 07:58:12Z

0

When you want to pass a variable as props, don't use quotes, instead use {}, so change:

<Header text="this.props.head"/>
<CardDesc text="this.props.des" />

To:

<Header text={this.props.head}/>
<CardDesc text={this.props.des} />

Now, you can simply render your cards like so:

ReactDOM.render(
  <div>
    {cardContent.map(cardItem => <Card head={cardItem.head} des={cardItem.des} />)}
  </div>
, document.getElementById('root'))

As you can see, a root element (div in this case) is required for the render function.

Another method would be to create a CardList component, and render that, instead of having the map in ReactDOM.render.

answered Aug 25, 2017 at 7:58

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

1 Comment

user8079593 Over a year ago

I didn't understand the logic in ReactDOM.render, as i don't know how map() works.

Rahmat Aligos · Accepted Answer · 2017-08-25 08:35:39Z

0

I think multiple rendering to the root element is bad idea, you can try create new component like App or whatever, end map your card components into it. Look at this

answered Aug 25, 2017 at 8:35

Rahmat Aligos

1,36412 silver badges13 bronze badges

Collectives™ on Stack Overflow

Render array data in class i react

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related