I know somebody had asked a similar question but I didint find the answer from the given responses so I decided to post it. I'm trying to render an array of components inside a div but nothing happens :

import React    from "react";
import ReactDOM from "react-dom";
import Button   from "@material-ui/core/Button";
import SimpleCard   from './cardExample';

class PriceCard extends React.Component {
  
  render(){
    return  (<SimpleCard/>)
    }
}
class Colonne extends React.Component {
    constructor(props){
        super(props);
        this.keyNumber=0;
        this.cards = [];
        this.handleAdd = this.handleAdd.bind(this);
    };
    handleAdd() {
        this.cards.push(<PriceCard key={this.keyNumber}/>);
        this.keyNumber  ;
        //console.log(this.cards)
        alert('Item added');
        return (this.cards)
    // remove item
   };
    render() {
        return (
        <div className="Colonne">
            
            <Button onClick={this.handleAdd}>
            Add a card
          </Button>
          
            <div>
                {this.cards}
            </div>              
          
           
        </div>

        );
    }
}

ReactDOM.render(<Colonne />, document.querySelector("#app"));

Apparently the problem comes from the this.cards. No error is generated in the console. I can clearly see the added components :

(2) […]
​
0: Object { "$$typeof": Symbol(react.element), type: class PriceCard
, key: "0", … }
​
1: Object { "$$typeof": Symbol(react.element), type: class PriceCard
, key: "1", … }
​
length: 2

When I replace this.test by the tag , Tthe component is rendering. I also tried with the map method but nothing happens neither. Can someone help me?

Thanks in advance for your answers

CodePudding user response：

The better option here is to store data in your array, and pass that data as a prop into the elements you are displaying.

// `prices` is an array of price info and in your return
return (
        <div className="Colonne">
            
            <Button onClick={this.handleAdd}>
            Add a card
          </Button>
          
            <div>
                {prices.map(it => <PriceCard key={it.keyNumber} price={it} />}
            </div>              
          
           
        </div>

        );

So, in adding new data to your prices, you push the data into the array, and let your jsx handle outputting that data via your PriceCard component.

CodePudding user response：

Thank you for your answer but I finally solve the problem. The content of the array that the render function was taking in account was only the initial one (so an empty array). It was not updating despite all the click events that could occur.

I read the answer from this

Passing the intial state to a component as a prop is an anti-pattern because the getInitialState (in our case the constuctor) method is only called the first time the component renders. Never more. Meaning that, if you re-render that component passing a different value as a prop, the component will not react accordingly, because the component will keep the state from the first time it was rendered. It's very error prone.

I could have used the method componentWillReceiveProps() (and I think I will do it for future needs) but I finally added the line this.forceUpdate() in handleAdd() and had the same result.