'How to change let value onClick in React

My default value is null (let activestatus = "";), but I want it to change on click to be:

let activestatus = "?IsActive=0";

I am getting value on click (as seen in console), but the value is not passed in "let activestatus".

class App extends Component {
  state = {
    reservations: [],
  };
  componentWillMount() {
    let activestatus = "";
    axios
      .get("https://localhost:44307/api/GetReservations/" + `${activestatus}`)
      .then((response) => {
        this.setState({
          reservations: response.data,
        });
      });
  }

  showActive = (e) => {
    e.preventDefault();
    console.log(e.target.value);
    this.activestatus = e.target.value;
  };

  render() {
    let reservations = this.state.reservations.map((reservation) => {
      return (
        <tr>
          <td>{reservation.Id}</td>
        </tr>
      );
    });

    return (
      <div className="App container">
        <Button
          class="activity-button"
          value={"?IsActive=0"}
          id="active"
          onClick={this.showActive}
        >
reactjsonclick


Solution 1:[1]

Can you try to have activeStatus as part of your state? Also if you want to refresh the data from the api based on this field, then should probably use componentDidUpdate that runs on state changes.

Solution 2:[2]

class App extends Component {
  state = {
    reservations: [],
    activestatus: ""
  };
  componentWillMount() {
    axios
      .get("https://localhost:44307/api/GetReservations/" + `${activestatus}`)
      .then((response) => {
        this.setState({
          reservations: response.data,
        });
      });
  }

  showActive = (e) => {
    e.preventDefault();
    console.log(e.target.value);
    this.setState({ activestatus: e.target.value });
  };

  render() {
    let reservations = this.state.reservations.map((reservation) => {
      return (
        <tr>
          <td>{reservation.Id}</td>
        </tr>
      );
    });

    return (
      <div className="App container">
        <Button
          class="activity-button"
          value={"?IsActive=0"}
          id="active"
          onClick={this.showActive}
        >`

Solution 3:[3]

Thanks guys, both were helpful.

Solution:

class App extends Component {
  state = {
    reservations: [],
    activestatus: "",
  };
  componentDidUpdate() {
    axios
      .get(
        "https://localhost:44307/api/GetReservations/" +
          `${this.state.activestatus}`
      )
      .then((response) => {
        this.setState({
          reservations: response.data,
        });
      });
  }
  }

  showActive = (e) => {
    e.preventDefault();
    console.log(e.target.value);
    this.setState({ activestatus: e.target.value });
  };

  render() {
    let reservations = this.state.reservations.map((reservation) => {
      return (
        <tr>
          <td>{reservation.Id}</td>
        </tr>
      );
    });

    return (
      <div className="App container">
        <Button
          class="activity-button"
          value={"?IsActive=0"}
          id="active"
          onClick={this.showActive}
        >`

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ujwal Kumar
Solution 2 Balagoni Harish
Solution 3 Andrej Flauder

Related Questions