CODEWITHSUNDEEP
javascriptreactjsruntime-error
Yesha Patel
Yesha Patel

Reputation: 1

React: object is not defined no-undef

I have made component TempCalculator which will calculates whether the water would boil at a given temperature. Additionally, it renders the BoilingVerdict for the current input value.


const BoilingPeek = (props) => {
  return props.celsius >= 100 ? (
    <p>Water would boil.</p>
  ) : (
    <p>Water is would not boil.</p>
  );
};

class TempCalculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleTempChange = this.handleTempChange.bind(this);
    this.state = {
      temperature: "",
    };
  }

  handleTempChange(event) {
    this.setState({ temperature: event.target.name });
  }

  render() {
    return (
      <fieldset>
        <legend>Temprature of water in celsius</legend>
        <input name={temperature} onChange={this.handleTempChange} />
        <BoilingPeek celsius={parseFloat(temperature)} />
      </fieldset>
    );
  }
}
ReactDOM.render(<TempCalculator/>,document.getElementById("root"))

ERROR 'temperature' is not defined no-undef

Upvotes: 0

Views: 807

Answers (2)

Yesha Patel
Yesha Patel

Reputation: 1


const BoilingPeek = (props) => {
  return props.celsius >= 100 ? (
    <p>Water would boil.</p>
  ) : (
    <p>Water is would not boil.</p>
  );
};

class TempCalculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleTempChange = this.handleTempChange.bind(this);
    this.state = {
      temperature: "",
    };
  }
  handleTempChange(e) {
    this.setState({ temperature: e.target.value });
  }

  render() {
    return (
      <fieldset>
        <legend>Temprature of water in celsius</legend>
        <input
          value={this.state.temperature}
          onChange={this.handleTempChange}
        />
        <BoilingPeek celsius={parseFloat(this.state.temperature)} />
      </fieldset>
    );
  }
}


ReactDOM.render(<TempCalculator/>,document.getElementById("root"))

Thanks, it's solved

Upvotes: 0

pedram afra
pedram afra

Reputation: 1213

that's because temperature is a state. use like this:

<input name={this.state.temperature} onChange={this.handleTempChange} />
<BoilingPeek celsius={parseFloat(this.state.temperature)} />

Upvotes: 1

Related Questions