Loop through array of items in react

Question

I will be getting some data from an api and will have a state object that looks like this:

constructor(props) {
super(props);
this.state = {
  searchable: false,
  selectValue: 'day-to-day-banking',
  clearable: false,
  data: {
    features: [
      {
        body: '<h3 id="day-to-day-banking">Day to Day Banking</h3> <h2>Personal banking that looks out for you</h2> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p>',
        features: '<ul> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> </ul>'
      },
      {
        body: '<h3 id="day-to-day-banking">Day to Day Banking</h3> <h2>Personal banking that looks out for you</h2> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p>',
        features: '<ul> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> </ul>'
      }
    ]
  }
};

In my render function I want to loop through the features array and then output some html around it. How do I go about doing this? I'm still new to react and learning from my failings.

for (var i = 0; i <= this.state.data.features.length; i++) {
  <p>data to go here</p>
}

EDIT:

This is the HTML I am trying to repeat:

<div className="feature">
              //this is where the body copy should go
              <div className="additional-benefits-container">
                <div className="additional-benefits-title" onClick={this.handleBenefitsClick}>
                  <p>Additional benefits</p>
                  <span className="dropdown-arrow"/>
                </div>
                <div className="additional-benefits-wrapper">
                  <div className="additional-benefits">
                    //this is where my benefits data goes from the features array
                  </div>
                </div>
              </div>
            </div>

Once I've been abled to output the data I would want to turn it into some form of accordian and I can see I need to have seperate state values for each to hide and show the correct one. How do I incorporate that to this?

this.state.data.features.each(f => <div>{f.body}</div>) etc. I'd suggest just looking for a tutorial first before asking here--this info is all over the place. (Noting that you might have to deal w/ the embedded HTML.) — Dave Newton
– Dave Newton, Commented Apr 20, 2017 at 16:16

Ved · Accepted Answer · 2017-04-20 17:18:18Z

2

I have not tested this. But it should work .

    render(){

        let data = [];

        if(this.state.data.features.length>0){
           this.state.data.features,forEach((val,i)=>{                 
         data.push(<div key={i}>    
                <div dangerouslySetInnerHTML={{__html:val.body}}/> 
            <div dangerouslySetInnerHTML={{__html: val.features}}/>
             </div>
           )
        })

      return(
             <div>{data}</div>

        )
        }

Note: You need to use dangerouslySetInnerHTML to render raw html.
Reference

DEMO: https://jsfiddle.net/jwm6k66c/2565/

edited Apr 20, 2017 at 17:18

answered Apr 20, 2017 at 16:21

Ved

12.1k5 gold badges46 silver badges61 bronze badges

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

3 Comments

saunders Over a year ago

Hi, I've tried to follow what you've done but if you see my edit i cant just put the html in there. the data is already an array so not sure why i'd have to create another array. im fine with doing that but i keep gettinh Objects are not valid as a React child

Ved Over a year ago

@saunders let me check

saunders Over a year ago

Thanks for your help

Dan Cantir · Accepted Answer · 2017-04-20 17:10:05Z

1

You can do it like this:

  render(){
    const { data } = this.state;
    return (
        <div>
        { data.features.map((feature, index) => {
            return <div className="feature" key={index}>
            <div dangerouslySetInnerHTML={{__html: feature.body}} />;
              <div className="additional-benefits-container">
                <div className="additional-benefits-title" onClick={this.handleBenefitsClick}>
                  <p>Additional benefits</p>
                  <span className="dropdown-arrow"/>
                </div>
                <div className="additional-benefits-wrapper">
                  <div className="additional-benefits" dangerouslySetInnerHTML={{__html: feature.features}} />;
                </div>
              </div>
            </div>
        }) }
      </div>
    )
  }

Check out this fiddle: https://jsfiddle.net/dcantir/Lr4e9kvs/

answered Apr 20, 2017 at 17:10

Dan Cantir

2,96517 silver badges25 bronze badges

1 Comment

saunders Over a year ago

Thanks for your help

Collectives™ on Stack Overflow

Loop through array of items in react

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related