React Input Value

greed94 · August 23, 2020, 1:50pm

Hi.
I want to clear input value (react-search-box) on focus. Value of input is this.state.inputValue, there is a function (clearInput2) which changes state of this.state.inputValue and it is definitely changed, but on screen I still see not updated value of input.

How can this be achieved?

import React, { Component } from "react";

import {

  Search,

  Container,

  ContainerDane,

  Dane,

  Menu,

  MenuElement,

  StyledLink,

  Wykres,

  WykresContainer,

  DropDownList,

  ListElement,

  DropDownUp,

  DropDownContainer,

  Details

} from "./MapStyle";

import ReactSearchBox from "react-search-box";

import Dexie from "dexie";

import L from "leaflet";

import {

  Map as Map2,

  Marker,

  Popup,

  TileLayer,

  CircleMarker,

  Circle

} from "react-leaflet";

const kolor00cc66 = new L.Icon({

  iconUrl: require("./../../Assets/kolor_very_low.png"),

  iconRetinaUrl: require("./../../Assets/kolor_very_low.png"),

  iconAnchor: null,

  popupAnchor: [0, 0],

  shadowUrl: null,

  shadowSize: null,

  shadowAnchor: null,

  iconSize: new L.Point(30, 39),

  className: "leaflet-div-icon",

});

const kolor92d050 = new L.Icon({

  iconUrl: require("./../../Assets/kolor_low.png"),

  iconRetinaUrl: require("./../../Assets/kolor_low.png"),

  iconAnchor: null,

  popupAnchor: [0, 0],

  shadowUrl: null,

  shadowSize: null,

  shadowAnchor: null,

  iconSize: new L.Point(30, 39),

  className: "leaflet-div-icon",

});

const kolorffcc00 = new L.Icon({

  iconUrl: require("./../../Assets/kolor_medium.png"),

  iconRetinaUrl: require("./../../Assets/kolor_medium.png"),

  iconAnchor: null,

  popupAnchor: [0, 0],

  shadowUrl: null,

  shadowSize: null,

  shadowAnchor: null,

  iconSize: new L.Point(30, 39),

  className: "leaflet-div-icon",

});

const kolorff9900 = new L.Icon({

  iconUrl: require("./../../Assets/kolor_high.png"),

  iconRetinaUrl: require("./../../Assets/kolor_high.png"),

  iconAnchor: null,

  popupAnchor: [0, 0],

  shadowUrl: null,

  shadowSize: null,

  shadowAnchor: null,

  iconSize: new L.Point(30, 39),

  className: "leaflet-div-icon",

});

const kolor800000 = new L.Icon({

  iconUrl: require("./../../Assets/kolor_very_high.png"),

  iconRetinaUrl: require("./../../Assets/kolor_very_high.png"),

  iconAnchor: null,

  popupAnchor: [0, 0],

  shadowUrl: null,

  shadowSize: null,

  shadowAnchor: null,

  iconSize: new L.Point(30, 39),

  className: "leaflet-div-icon",

});

class Map extends Component {

  constructor(props) {

    super(props);

    this.state = {

      lat: 51.106105,

      dataToMap: [],

      lng: 17.034652,

      zoom: 15,

      showDropDown: true,

      inputValue:"x",

      data: [

        {

          key: "Wrocław",

          value: "Gostyń, Rybnicka",

          positionDlugosc: 50.1093,

          positionSzerokosc: 18.836207,

          pomiar: 20,

          kolor: "kolor",

        },

        {

          key: "Wrocław2",

          value: "Wrocław, Prusa",

          positionDlugosc: 51.119193,

          positionSzerokosc: 17.04232,

          pomiar: 20,

          kolor: "kolor",

        },

        {

          key: "Wrocław3",

          value: "Wrocław, Mennicza",

          positionDlugosc: 51.106105,

          positionSzerokosc: 17.034652,

          pomiar: 20,

          kolor: "kolor",

        },

      ],

      actualCoord: [

        {

          positionDlugosc: 6,

          positionSzerokosc: 25,

        },

      ],

      miejsce: "",

      pomiar: null,

      dataPomiaru: "",

      wykres: "http://srodowiskowokolicy.pl/9CA72FC4F5FC.jpg",

    };

    this.getPHP = this.getPHP.bind(this);

    this.toMap = this.toMap.bind(this);

    this.showSensor = this.showSensor.bind(this);

    this.showDropDown = this.showDropDown.bind(this);

    this.clearInput = this.clearInput.bind(this);

    this.clearInput2 = this.clearInput2.bind(this);

  }

  componentDidMount() {

    setInterval(this.getPHP(), 3000);

  }

  getLastDexie() {

    var db = new Dexie("CzujnikiHalas");

    db.version(1).stores({

      halas: "++id,miejsce,pomiar,dataPomiaru,szerokosc,dlugosc",

    });

    const getPosts = async () => {

      const allPosts = await db.halas.toArray();

      if (allPosts.length > 0) {

        let actualCoord = {

          positionDlugosc: allPosts[0].dlugosc,

          positionSzerokosc: allPosts[0].szerokosc,

        };

        this.setState({ miejsce: allPosts[0].miejsce });

        this.setState({ actualCoord: actualCoord });

        this.setState({ pomiar: allPosts[0].pomiar });

        this.setState({ dataPomiaru: allPosts[0].dataPomiaru });

        this.setState({ wykres: allPosts[0].wykres });

        this.setState({ lat: allPosts[0].lat });

        this.setState({ lng: allPosts[0].lng });

      }

    };

    getPosts();

  }

  clearInput(){

    //this.setState({ inputValue: ""},()=>{console.log(this.state.inputValue)});

    console.log("klik")

  }

  clearInput2(){

    this.setState({ inputValue: ""},()=>{console.log(this.state.inputValue)});

  }

  showDropDown() {

    if (this.state.showDropDown) {

      var arrayOfElements = document.getElementsByClassName("sc-fzoant");

      var lengthOfArray = arrayOfElements.length;

      for (var i = 0; i < lengthOfArray; i++) {

        arrayOfElements[i].style.display = "block";

      }

    } else {

      var arrayOfElements = document.getElementsByClassName("sc-fzoant");

      var lengthOfArray = arrayOfElements.length;

      for (var i = 0; i < lengthOfArray; i++) {

        arrayOfElements[i].style.display = "none";

      }

    }

    this.setState({ showDropDown: !this.state.showDropDown });

  }

  showSensor(value) {

    this.showDropDown();

    let copyActualCoord = {};

    copyActualCoord.positionSzerokosc = value.positionSzerokosc;

    copyActualCoord.positionDlugosc = value.positionDlugosc;

    this.setState({ actualCoord: copyActualCoord });

    this.setState({ pomiar: value.pomiar });

    this.setState({ miejsce: value.value });

    this.setState({ lng: value.positionSzerokosc });

    this.setState({ lat: value.positionDlugosc });

    this.setState({ dataPomiaru: value.dataPomiaru }, () => {

      this.indexedDB();

    });

    this.setState({

      wykres: "http://srodowiskowokolicy.pl/" + value.nazwa_stacji + ".jpg ",

    });

    setTimeout(this.getPHP() , 1000);

  }

  componentDidUpdate() {

    console.log("update");

    // console.log(this.state.data);

  }

  indexedDB() {

    var db = new Dexie("CzujnikiHalas");

    db.version(1).stores({

      halas: "++id,miejsce,pomiar,dataPomiaru,szerokosc,dlugosc,wykres",

    });

    //

    // Manipulate and Query Database

    //

    db.halas.clear();

    db.halas

      .add({

        miejsce: this.state.miejsce,

        pomiar: this.state.pomiar,

        dataPomiaru: this.state.dataPomiaru,

        dlugosc: this.state.actualCoord.positionDlugosc,

        szerokosc: this.state.actualCoord.positionSzerokosc,

        wykres: this.state.wykres,

        lng: this.state.actualCoord.positionSzerokosc,

        lat: this.state.actualCoord.positionDlugosc,

      })

      .catch(function (e) {

        alert("Error: " + (e.stack || e));

      });

  }

  getPHP() {

    const url = "http://srodowiskowokolicy.pl/wspolne_halas_json.php"; // site that doesn’t send Access-Control-*

    fetch(url) // https://cors-anywhere.herokuapp.com/https://example.com //fetch(proxyurl+url)

      .then((response) => response.text())

      .then((contents) => this.sensorsMap(contents))

      .catch(() => {

        this.secondFetch();

      });

  }

  sensorsMap(contents) {

    let txt = document.createElement("textarea");

    txt.innerHTML = contents;

    contents = txt.value;

    let contentsToJSON = JSON.parse(contents);

    let data1 = { ...this.state.data };

    this.updateFromDefault(contentsToJSON);

    for (let i = 0; i <= 3; i++) {

      data1[i].key = contentsToJSON["czujniki"][i].nazwa_czujnika;

      data1[i].value = decodeURIComponent(

        contentsToJSON["czujniki"][i].nazwa_czujnika

      );

      data1[i].positionSzerokosc = contentsToJSON["czujniki"][i].szerokosc;

      data1[i].positionDlugosc = contentsToJSON["czujniki"][i].dlugosc;

      data1[i].pomiar = contentsToJSON["czujniki"][i].pomiar;

      data1[i].dataPomiaru = contentsToJSON["czujniki"][i].data;

      data1[i].kolor = contentsToJSON["czujniki"][i].kolor.replace(

        "#",

        "kolor"

      );

      data1[i].nazwa_stacji = contentsToJSON["czujniki"][i].nazwa_stacji;

    }

    this.setState((prevState) => ({

      data: [...prevState.data, data1],

    }));

  }

  updateFromDefault(contentsToJSON) {

    let copyActualCoord = {};

    copyActualCoord.positionSzerokosc = contentsToJSON["czujniki"][2].szerokosc;

    copyActualCoord.positionDlugosc = contentsToJSON["czujniki"][2].dlugosc;

    this.setState({ actualCoord: copyActualCoord });

    this.setState({ pomiar: contentsToJSON["czujniki"][2].pomiar });

    this.setState({ miejsce: contentsToJSON["czujniki"][2].nazwa_czujnika });

    if (this.state.wykres !== contentsToJSON["czujniki"][2].nazwa_stacji)

      this.setState({

        wykres:

          "http://srodowiskowokolicy.pl/" +

          contentsToJSON["czujniki"][2].nazwa_stacji +

          ".jpg",

      });

    this.setState({ dataPomiaru: contentsToJSON["czujniki"][2].data }, () => {

      this.getLastDexie();

    });

    contentsToJSON["czujniki"].sort(function (a, b) {

      if (a.nazwa_czujnika > b.nazwa_czujnika) {

          return 1;

      }

      if (b.nazwa_czujnika > a.nazwa_czujnika) {

          return -1;

      }

      return 0;

    });

    this.setState(

      {

        dataToMap: contentsToJSON["czujniki"],

      }

    );

  }

  secondFetch() {

    if (this.state.data[2].kolor == "kolor") {

      console.log("dwa");

      const proxyurl = "https://cors-anywhere.herokuapp.com/";

      const url = "http://srodowiskowokolicy.pl/wspolne_halas_json.php"; // site that doesn’t send Access-Control-*

      fetch(proxyurl + url)

        .then((response) => response.text())

        .then((contents) => this.sensorsMap(contents))

        .catch(() =>

          console.log("Can’t access " + url + " response. Blocked by browser?")

        );

    }

  }

  toMap(value) {

    

    let copyActualCoord = {};

    copyActualCoord.positionSzerokosc = value.positionSzerokosc;

    copyActualCoord.positionDlugosc = value.positionDlugosc;

    this.setState({ actualCoord: copyActualCoord });

    this.setState({ pomiar: value.pomiar });

    this.setState({ miejsce: value.value });

    this.setState({ lng: value.positionSzerokosc });

    this.setState({ lat: value.positionDlugosc });

    this.setState({ dataPomiaru: value.dataPomiaru }, () => {

      this.indexedDB();

    });

    this.setState({

      wykres: "http://srodowiskowokolicy.pl/" + value.nazwa_stacji + ".jpg ",

    });

    this.getPHP()

    //this.setState({ inputValue: ""},()=>{console.log(this.state.inputValue)});

  }

  showFromMap(value){

    

    this.setState({ pomiar: value.pomiar });

    this.setState({ miejsce: value.nazwa_czujnika });

    this.setState({ dataPomiaru: value.data }, () => {

      this.indexedDB();

    });

    this.setState({

      wykres: "http://srodowiskowokolicy.pl/" + value.nazwa_stacji + ".jpg ",

    });

    window.scrollTo(0, 400);

this.getPHP();

  }

  render() {

    const position = [this.state.lat, this.state.lng];

    return (

      <Container>

        <Menu>

          <MenuElement>

            <StyledLink to="/map" activeClassName="active">

              Hałas

            </StyledLink>

          </MenuElement>

          <MenuElement>

            <StyledLink to="/mapPowietrze">Powietrze</StyledLink>

          </MenuElement>

        </Menu>

        <Search>

          <ReactSearchBox 

            placeholder="Miasto, ulica"

            value={this.state.inputValue}

            data={this.state.data}

            onSelect={this.toMap}

            onClick={this.clearInput}

            onFocus={this.clearInput2}

            

          />

        </Search>

        <Map2 center={position} zoom={this.state.zoom}>

          <TileLayer

            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

          />

          {this.state.dataToMap.length >= this.state.data.length

            ? this.state.dataToMap.map((czujnik) => {

                return (

                  <div key={czujnik.nazwa_czujnika}>

                    {czujnik.kolor == "#92d050" ? (

                       <div><Circle center={[czujnik.dlugosc, czujnik.szerokosc]} fillColor={czujnik.kolor} radius={500} weight={0}/>

                      <Marker

                        icon={kolor92d050}

                        position={[czujnik.dlugosc, czujnik.szerokosc]}

                      >

                        <Popup>

                          {czujnik.nazwa_czujnika} <br />{" "}

                          

                          <span style={{ color: czujnik.kolor }}>

                            {czujnik.pomiar} dBA

                          </span>

                         

                          <Details  onClick={() => this.showFromMap(czujnik)}>Szczegóły</Details>

                        </Popup>

                      </Marker>

                      </div>

                    ) : czujnik.kolor == "#00cc66" ? (

                      <div><Circle center={[czujnik.dlugosc, czujnik.szerokosc]} fillColor={czujnik.kolor} radius={500} weight={0}/>

                      <Marker

                        icon={kolor00cc66}

                        position={[czujnik.dlugosc, czujnik.szerokosc]}

                      >

                        <Popup>

                          {czujnik.nazwa_czujnika} <br />{" "}

                          <span style={{ color: czujnik.kolor }}>

                            {czujnik.pomiar} dBA

                          </span>{" "}

                          <Details  onClick={() => this.showFromMap(czujnik)}>Szczegóły</Details>

                        </Popup>

                        

                      </Marker>

                      </div>

                    ) : czujnik.kolor == "#ffcc00" ? (

                      <div><Circle center={[czujnik.dlugosc, czujnik.szerokosc]} fillColor={czujnik.kolor} radius={500} weight={0}/>

                      <Marker

                        icon={kolorffcc00}

                        position={[czujnik.dlugosc, czujnik.szerokosc]}

                      >

                        <Popup>

                          {czujnik.nazwa_czujnika} <br />{" "}

                          <span style={{ color: czujnik.kolor }}>

                            {czujnik.pomiar} dBA

                          </span>{" "}

                          <Details  onClick={() => this.showFromMap(czujnik)}>Szczegóły</Details>

                        </Popup>

                        

                      </Marker>

                      </div>

                    ) : czujnik.kolor == "#ff9900" ? (

                      <div><Circle center={[czujnik.dlugosc, czujnik.szerokosc]} fillColor={czujnik.kolor} radius={500} weight={0}/>

                      <Marker

                        icon={kolorff9900}

                        position={[czujnik.dlugosc, czujnik.szerokosc]}

                      >

                        <Popup>

                          {czujnik.nazwa_czujnika} <br />{" "}

                          <span style={{ color: czujnik.kolor }}>

                            {czujnik.pomiar} dBA

                          </span>{" "}

                          <Details  onClick={() => this.showFromMap(czujnik)}>Szczegóły</Details>

                        </Popup>

                      </Marker>

                      </div>

                    ) : czujnik.kolor == "#800000" ? (

                      <div><Circle center={[czujnik.dlugosc, czujnik.szerokosc]} fillColor={czujnik.kolor} radius={500} weight={0}/>

                      <Marker

                        icon={kolor800000}

                        position={[czujnik.dlugosc, czujnik.szerokosc]}

                      >

                        <Popup>

                          {czujnik.nazwa_czujnika} <br />{" "}

                          <span style={{ color: czujnik.kolor }}>

                            {czujnik.pomiar} dBA

                          </span>{" "}

                          <Details  onClick={() => this.showFromMap(czujnik)}>Szczegóły</Details>

                        </Popup>

                      </Marker>

                      </div>

                    ) : null}

                  </div>

                );

              })

            : null}

        </Map2>

        <DropDownContainer>

          <DropDownUp onClick={() => this.showDropDown()}>

          {this.state.miejsce} &#x25BC;

          </DropDownUp>

          <DropDownList>

            {this.state.data.map((czujnik, index) => {

              return (

                <ListElement

                  key={index}

                  onClick={() => this.showSensor(czujnik)}

                >

                  {czujnik.value}

                </ListElement>

              );

            })}

          </DropDownList>

        </DropDownContainer>

        <ContainerDane id="dane">

          {this.state.pomiar !== null ? (

            <Dane>

              Miejsce pomiaru: {this.state.miejsce}

              <br />

              Data odczytu: {this.state.dataPomiaru}

              <br />

              Poziom hałasu = {this.state.pomiar} dBA

            </Dane>

          ) : null}

        </ContainerDane>

        <WykresContainer>

          <Wykres src={this.state.wykres} />

        </WykresContainer>

      </Container>

    );

  }

}

export default Map;

DanCouper · August 23, 2020, 3:13pm

Firstly, I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

DanCouper · August 23, 2020, 3:18pm

Secondly, this is a huge, incredibly complicated piece of code that you are asking people for help with. Someone may read through it all and notice an obvious mistake, but more likely they are not.

Can you make a simplified version that only shows the issue you are having? You seem to have jammed everything and the kitchen sink into a single file anyway, making it near-impossible to debug, so it would pay to break it down into smaller, focussed modules.

You can use Stackblitz or CodeSandbox to provide an example implementation.

greed94 · August 23, 2020, 8:37pm

It’s solved:

          <ReactSearchBox 
            placeholder="Miasto, ulica"
            value={this.state.inputValue}
            data={this.state.data}
            onSelect={this.toMap}
            onClick={this.clearInput}
            onFocus={() => {
              document.getElementsByClassName("sc-bdVaJa")[0].value = ""
            }}
            
          />

I```

ilenia · June 1, 2021, 6:43pm