Water temperature

Question

I’m looking to audition in React.

I want to put a value on the input and will tell if the water has boiled or not, but there is no button.

You’re making a mistake and I don’t know how to fix it.

class Temperatura extends Component {
            state = {query: '',};

           ferver = (query) =>{
                this.setState(() => ({
                 query:query.water =(query)=>{ return (query >=100) ? 'Agua ferveu.': 'Agua não ferveu.'}
                }))
            }
    render(){
        return (
            <div className='App'>
              <form>
                <input
                    placeholder='Digite a temperatura da agua'
                    type='text'
                    value={this.state.query}
                    onChange={(e) => this.ferver(e.target.value)}
                />
                </form>
                <p>{this.state.query}</p>
            </div>
        )
    }
}
export default Temperatura;

Answer 1

query is being used as both the value of your input, water status message, and you are also trying to access a property called water in that query, that makes no sense.

You shouldn’t be initiating the attribute value of your input, as this will "lock" the input with the value passed to it. If you want an initial value on that input, use the attribute defaultValue

Also the syntax used in your setState is not valid. Try it this way:

class Temperatura extends Component {
    state = { mensagem: '' }

    ferver = (temperatura) => {
        this.setState({ mensagem: temperatura >= 100 ? 'Agua ferveu.' : 'Agua não ferveu.' })
    }

    render() {
        return (
            <div className='App'>
                <form>
                    <input
                        placeholder='Digite a temperatura da agua'
                        type='number'
                        onChange={(e) => this.ferver(e.target.value)}
                    />
                </form>
                <p>{this.state.mensagem}</p>
            </div>
        )
    }
}