How to iterate over an array of mail objects received through Wp Rest Api in js reaction

Question

hello :) I am working on wp rest api and reacting to js, ​​and I have successfully extracted data from wp rest api and displayed it, but this is not the right way to display data in a reaction. An error message is displayed in the console: “Each child in the array or iterator must have a unique“ key. ”I read the document in response to the question, but did not understand. Here is what I wrote so far. Any help would be greatly appreciated

      class Home extends React.Component{
      componentDidMount(){
        const API_URL = 'http://localhost/wordpress/wp-json/wp/v2/posts/';
        this.serverRequest = $.get(API_URL, function (result) {
          this.setState({
            result:result,
            loaded:true
          });
        }.bind(this));
      }
      constructor(props) {
        super(props);
        this.state ={result:null,loaded:false};
        autoBind(this);
      }
      render(){
        if (this.state.loaded) {
          return(
            <div>
                {this.state.result && <Portfolio data = {this.state.result}/>}
            </div>
          )
        }
        return(
          <div>loading...
          </div>
        )

      }
    }
    export default Home;

and the Portfolio component to which prop data is transmitted makes data like this inappropriately

class Portfolio extends React.Component{
  constructor(props) {
    super(props);
    autoBind(this);
  }
  render(){
  var contents=[];
  for (var i = 0; i < this.props.data.length; i++) {
    if (this.props.data[i].categories[0] == 5) {
      var productImage ={
        backgroundImage:'url('+ this.props.data[i].featured_image + ')',
        backgroundSize: '100% 100%'
      }
      contents.push(
            <div  id="portfolio-product-item" style ={productImage} >
              <div id ="portfolio-product-item-details" >
                <h3>{this.props.data[i].slug}</h3>
                <div dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}} />
              </div>
            </div>
      );
    }
  }
    return(
      <section className="portfolio">
           {contents}
      </section>
    )
  }
}
export default Portfolio;

Answer 1

Portfolio.

, .

class Portfolio extends React.Component{
  constructor(props) {
    super(props);
    autoBind(this);
  }

  renderPortfolioOption(index, option) {
    const { data } = this.props;

    if (option.categories[0] == 5) {
      var productImage ={
        backgroundImage:'url('+ option.featured_image + ')',
        backgroundSize: '100% 100%'
      }

      return(
        <div key={index} id="portfolio-product-item" style ={productImage} >
          <div id ="portfolio-product-item-details" >
            <h3>{option.slug}</h3>
            <div dangerouslySetInnerHTML={{__html: option.content.rendered}} />
          </div>
        </div>
      );
    }
  }

  render() {
    const { data } = this.props;

    if (data.length) return null;

    return(
      <section className="portfolio">
        { data.map((index, option) => { return this.renderPortfolioOption(index, option); }) }
      </section>
    )
  }
}

export default Portfolio;

Answer 2

, "" . -

contents.push(
        <div  id="portfolio-product-item" style ={productImage} >
          <div id ="portfolio-product-item-details" >
            <h3>{this.props.data[i].slug}</h3>
            <div dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}} />
          </div>
        </div>
  );

div portfolio-product-item key, -

contents.push(
        <div  key={i} id="portfolio-product-item" style ={productImage} >
          <div id ="portfolio-product-item-details" >
            <h3>{this.props.data[i].slug}</h3>
            <div dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}} />
          </div>
        </div>
  );

https://facebook.imtqy.com/react/docs/multiple-components.html#dynamic-children .