CODEWITHSUNDEEP
javascriptreactjsreact-native
Ritik Kumar
Ritik Kumar

Reputation: 701

React Component doesn't update on updating the state

Map.js

import React, { Component } from "react";
import DatamapsIndia from "react-datamaps-india";

class Map extends Component {
  state = { };
  render() {
    console.log("checkbox value",this.props.checkbox)  //correctly updating on clicking on checkbox
    return (    
        this.props.checkbox ? 
        <DatamapsIndia
          regionData={{
            Maharashtra: {
              value: 10,
            },
          }}
        //   hoverComponent={({ value }) => {
        //     return <span>{value}</span>;
        //   }}
          mapLayout={{
            title: "Covid Map",
            legendTitle: "Active Cases",
            startColor: "#FFDAB9",
            endColor: "#FF6347",
            hoverTitle: "Count",
            noDataColor: "#f5f5f5", // this is the variable that has to change on changing of checkbox value
            borderColor: "#8D8D8D",
            hoverBorderColor: "#8D8D8D",
            hoverColor: "green",
          }}
        /> :
        <DatamapsIndia
        regionData={{
          Maharashtra: {
            value: 10,
          },
        }}
      //   hoverComponent={({ value }) => {
      //     return <span>{value}</span>;
      //   }}
        mapLayout={{
          title: "Covid Map",
          legendTitle: "Active Cases",
          startColor: "#FFDAB9",
          endColor: "#FF6347",
          hoverTitle: "Count",
          noDataColor: "#f24f22", // this is the variable that has to change on changing of checkbox value
          borderColor: "#8D8D8D",
          hoverBorderColor: "#8D8D8D",
          hoverColor: "green",
        }}
      />
    );
  }
}

export default Map;

App.js

import logo from "./logo.svg";
import "./App.css";
import React, { Component } from "react";
import Header from "./Components/Header";
import Body from "./Components/Body";
import Map from "./Components/Map";

class APP extends Component {
  state = {
    checkbox: false,
  };
  constructor(props) {
    super(props);
    this.checkBoxfunction = this.checkBoxfunction.bind(this);
  }

  checkBoxfunction() {
    var check = document.getElementById("customSwitch2").checked;
    this.setState(
      {
        checkbox: check,
      },
      () => {
        console.log(this.state.checkbox);
      }
    );
  }

  componentDidMount() {
    console.log("CheckBox Updation(APP.JS) Mount", this.state.checkbox);
    this.checkBoxfunction();
  }

  render() {
    return (
      <div className="App">
        <Header
          checkbox={this.state.checkbox}
          checkBoxfunction={this.checkBoxfunction}
        />
        <div className="d-flex flex-column">
          <div className="map" style={{ width: "70%" , position:"absolute", right:"10px", top:"130px"}}>
            <Map checkbox={this.state.checkbox} />
          </div>
          <div className="table" style={{ width: "30%"}}>
            <Body checkbox={this.state.checkbox} />
          </div>
        </div>
      </div>
    );
  }
}

export default APP;

Here I'm passing the checkbox value to Map component and I want that whenever the state of the checkbox changes update the "NoDatacolor" value but the thing is not In the way I want . Even on changing the checkbox state my map "noDataColor" remains the same but the console line in Map component updating the correct value of checkbox each and everytime I'm clicking on it.

Upvotes: 1

Views: 257

Answers (1)

rigojr
rigojr

Reputation: 361

It's possible that the <DatamapsIndia {...args} /> handle its props as immutable, I worked with leaflet and faced a similar issue, here you can find information about it.

You can try the following dirty solution:

const { checkbox } = this.props;
...
<DatamapsIndia
  ...
  key={`${checkbox}`}
  ...
  mapLayout={{
    ...
    noDataColor: checkbox ? "#f5f5f5" : "#f24f22",
    ...
  }}
/>

hope this works, please let me know.

Upvotes: 1

Related Questions