Background color is not rendering for the created nodes

Question

I am trying to implement Path Finding Visualizer tutorial by Clement . I am new with the react. The color for the start and the end node is not getting rendered.

Please take a look at my files:

PathVisualizer.css :

.grid{
    margin: 500px 500 500;
    margin-top: 100px;
}

PathVisualizer.jsx :

import React, {Component} from "react";
import Node from './Node/Node';
import './Node/Node.css'

import './PathfindingVisualizer.css';


export default class PathfindingVisualizer extends Component{
    constructor(props){
        super(props);
        this.state={
        nodes: [],
        };
    }
    componentDidMount() {
        const nodes=[];
       
        for(let row=0; row<20; row++){
            const currentRow=[];
            for(let col=0; col<50; col++){
                const currentNode={
                    col,
                    row,
                    isStart : row === 10 && col === 5,
                    isFinish : row === 10 && col === 45 ,
                };
                
                currentRow.push(currentNode);
            }
            nodes.push(currentRow);
        }
        this.setState({nodes});
    }
    render(){
        const {nodes}=this.state;
        console.log(nodes);

        return(
            <div className="grid">
                {nodes.map((row,rowIdx)=>{
                    return(
                        <div key={rowIdx}>
                            {row.map((node,nodeIdx) => {
                            const {isStart, isFinish} = node;
                            return(
                                
                                <Node>
                                    key={nodeIdx}
                                    isStart={isStart}
                                    isFinish={isFinish}
                                    test={'foo'}
                                    test={'kappa'}
                                </Node>
                            );
                        })}
                        </div>
                    );
                    })}
                
            </div>
        );
    }
}

Node.css :

.node {
    width: 25px;
    height: 25px;
    grid-gap: 20px;
    outline: 1px solid rgb(94, 93, 93);
    display: inline-block;
  }

.node-finish {

  background-color: rgba(181, 6, 6, 0.751) !important;
}

.node-start {
  background-color: rgb(4, 178, 4)!important;
}

Node.jsx :

import React, {Component} from "react";

import './Node.css';

export default class Node extends Component{
    constructor(props){
        super(props);
        this.state={}
    }

    render(){
        const {isFinish, isStart} = this.props
        const extraClassName = isFinish 
        ? 'node-finish'
        : isStart ? 'node-start'
        : '';
        return <div className ={`node ${extraClassName}`}></div>
        
    }

}

export const DEFAULT_NODE={
    row:0,
    col:0,
}; 

These are my files. I am getting the output of the grid rendered correctly. But the node color for that specific mentioned nodes are not changing. Please help me out in the same.

Thanks.

Answer 1

I am very curious about this. I tried color rendering on my side but it works well. You should check the nodes, isStart and isFinish props.

Oh you have wrong code in here.

<Node>
   key={nodeIdx}
   isStart={isStart}
   isFinish={isFinish}
   test={'foo'}
   test={'kappa'}
</Node>

This should be like below.

<Node
   key={nodeIdx}
   isStart={isStart}
   isFinish={isFinish}
   test={'foo'}
   test={'kappa'}>
</Node>