CODEWITHSUNDEEP
javascriptreactjs
user11315601
user11315601

Reputation:

React this.setState doesnt rerender content

I am writing simple application which need to rerender specified content.

My ideas about resolving the issue was to provide initializing data in constructor because something breaks react structure?But maybe helpful might be a tip how to map two dimensional array in render method. Propably here is the problem?

function Pool(props) {
        return(     
            <p className={`${props.row}`}></p>      
        );
}


export default class Board extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            mainArray: [],
         };
    }


    createBoard() {
    let children=[];
    let array=[];
        for(let i=0;i<20;i++){
            children=[];
            for(let j=0;j<20;j++){
                children.push(<Pool key={`${i}${j}`} row={`${square1}`}/>);
            }   
        array.push(<div key={`${i}`}>{children}</div>);     
        }
    this.state.mainArray=array;
    return this.state.mainArray;
    }

    startGame = () => {
        let array1=[];
        array1=this.state.mainArray.slice;
        let i=6;
        for(let j in array1[6]){
            array1[6][j]=<Pool key={`${i}${j}`} row={`${square2}`}/>;
        }
        this.setState({mainArray: array1});

    }


    render() {
        return (        
            <div  className="main"> 
            {this.createBoard()}
            <button onClick={this.startGame}>Start the game!</button>
            </div>
        );
    }
}

I am trying to change the colour of the sixth row for example.Regards

Upvotes: 0

Views: 52

Answers (1)

mbojko
mbojko

Reputation: 14699

This is incorrect:

        let array1=[];
        array1=this.state.mainArray.slice;

mainArray.slice() is a copy, but mainArray.slice is a function. Instead, begin with

        let array1 = this.state.mainArray.slice();

Upvotes: 1

Related Questions