React: Cannot show button when element is true - reactjs

Question

this is my code:
const Agregar = ({inputPregunta, validatePregunta}) => {
return(
<div id="content">
<h2>¿Cual es tu pregunta?</h2>
<input id="valorPregunta" type="text" placeholder="Añade aqui tu pregunta..." onChange={(e) => inputPregunta(e)}/>
{validatePregunta && <button>Agregar</button>}
</div>
);
}
What i am trying to do is when the input has something entered the prop validatePregunta (default is false) comes to true and the button element shows, for that i tried to do a method in the App.js file like this:
actualizarPregunta = (e) => {
this.setState({inputPregunta: e.target.value})
if(this.state.inputPregunta.trim().length > 0){
this.setState({validatePregunta: true})
} else {
this.setState({validatePregunta: false})
}
}
But nothing shows, is there's something that i am doing wrong?
Edit: Here is the code of the rendering for the props:
renderRoute = () => {
switch(this.state.route) {
case 'menu':
return (
<div>
<Header />
<Agregar inputPregunta={this.actualizarPregunta} validate={this.state.validatePregunta}/>
<Publications />
</div>
)
default :
return (
<div>
<Header />
<Publications />
</div>
)
}
}
render() {
return (
<div>
{
this.renderRoute(this.state.route)
}
</div>
);
}

Answer 1

This is how you use the compoennt
<Agregar inputPregunta={this.actualizarPregunta} validate={this.state.validatePregunta}/>
you are passing the value of this.state.validatePregunta by property name of validate
and then you are expecting something validatePregunta in component Agregar, but it should be actually validate
const Agregar = ({inputPregunta, validatePregunta}) => { //incorrect
const Agregar = ({inputPregunta, validate}) => { //correct
OR else simply change the prop name as below
<Agregar inputPregunta={this.actualizarPregunta} validatePregunta={this.state.validatePregunta}/>
And you should change actualizarPregunta once you update the state it's not updating the state value real time, its a async process, so this.state.inputPregunta.trim() will give you the value just before the update, so change it like this, and i love the way #Drew Reese handle this part
actualizarPregunta = (e) => {
const newValue = e.target.value;
this.setState({inputPregunta: newValue })
if(newValue.trim().length > 0){
this.setState({validatePregunta: true})
} else {
this.setState({validatePregunta: false})
}
}

Answer 2

Issue 1
The props don't align.
The component signature is const Agregar = ({inputPregunta, validatePregunta}) but you pass validate={this.state.validatePregunta}.
<Agregar
inputPregunta={this.actualizarPregunta}
validate={this.state.validatePregunta}
/>
Solution
Align on prop name usage.
<Agregar
inputPregunta={this.actualizarPregunta}
validatePregunta={this.state.validatePregunta}
/>
Issue 2
React component state lifecycle. The enqueued state is attempted to be referenced within the same react cycle that enqueue it. You need the enqueued value which won't be available until the next render cycle.
actualizarPregunta = (e) => {
this.setState({ inputPregunta: e.target.value }); // <-- state update enqueued
if (this.state.inputPregunta.trim().length > 0){ // <-- current state value
this.setState({ validatePregunta: true })
} else {
this.setState({ validatePregunta: false })
}
}
Solution 1
Enqueue the state update and use the current event value to set the other state
actualizarPregunta = (e) => {
const { value } = e.target;
this.setState({
inputPregunta: value,
validatePregunta: !!value.trim().length, // <-- *
});
}
* length == 0 is falsey, length !== 0 is truthy, and coerced to boolean (!!)
Solution 2
Enqueue the state update and use componentDidUpdate lifecycle function to handle effect
actualizarPregunta = (e) => {
const { value } = e.target;
this.setState({ inputPregunta: value });
}
componentDidUpdate(prevProps, prevState) {
const { inputPregunta } = this.state;
if (prevState.inputPregunta !== inputPregunta) {
this.setState({ validatePregunta: !!inputPregunta.trim().length });
}
}
Solution #1 is the simpler and more straight forward.