CODEWITHSUNDEEP
javascriptarraysreactjs
saunders
saunders

Reputation: 989

Loop through array of items in react

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?

Upvotes: 0

Views: 322

Answers (2)

Ved
Ved

Reputation: 12103

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/

Upvotes: 2

Dan Cantir
Dan Cantir

Reputation: 2955

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/

Upvotes: 1

Related Questions