Do a conditional display button form - reactjs

Question

hello I am novice on react, I have this form and I would like that my add button appears only when there is an input on the input.
I tried this in my render. thanks
class App extends Component {
state= {
value:''
}
handleChange=(e)=>{
e.preventDefault()
this.setState({value: e.currentTarget.value})
}
handleAdd=(e)=>{
e.preventDefault()
let value= [ ...this.state.value]
value.push(this.state.value)
}
render () {
let button;
if(this.handleChange){
button=<button>Add</button>
}
return (
<div className="formulaire">
<form onSubmit={this.handleAdd}>
<label>
<p>Name:</p>
<input value={this.state.value} onChange={this.handleChange}/>
</label>
{button}
</form>
</div>
)
}
}

Answer 1

You can use this.
render () {
return (
<div className="formulaire">
<form onSubmit={this.handleAdd}>
<label>
<p>Name:</p>
<input value={this.state.value} onChange={this.handleChange}/>
</label>
{
this.state.value !== ''&&
( <button>Add</button> )
}
</form>
</div>
)
}
}
I think it could be worked on your case.

Answer 2

Here are two ways you can handle this.. (make sure to expand the snippets and run them to see the code and how it works).
This is the more straight forward way:
const { Component } = React;
class App extends Component {
state = {
value: "",
added: []
};
handleChange = e => {
e.preventDefault();
this.setState({ value: e.currentTarget.value });
};
handleAdd = e => {
e.preventDefault();
this.setState({
added: [...this.state.added, this.state.value],
value: ""
});
};
render() {
let button;
let items;
if(this.state.value) {
button = <button>Add</button>
}
if(this.state.added && this.state.added.length > 0) {
items = (
<div>
<h3>Added Items:</h3>
<ul>{this.state.added.map(i => <li>{i}</li>)}</ul>
</div>
)
}
return (
<div className="formulaire">
<form onSubmit={this.handleAdd}>
<label>
<p>Name:</p>
<input value={this.state.value} onChange={this.handleChange} />
</label>
{button}
</form>
{items}
</div>
);
}
}
ReactDOM.render(<App />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
This is the exact same as above, only using different (more efficient) syntax:
const { Component } = React;
class App extends Component {
state = {
value: "",
added: []
};
handleChange = e => {
e.preventDefault();
this.setState({ value: e.currentTarget.value });
};
handleAdd = e => {
const { value, added } = this.state;
e.preventDefault();
this.setState({
added: [...added, value],
value: ""
});
};
render() {
const { value, added } = this.state;
let button = value && <button>Add</button>;
let items = added && added.length > 0 && (
<div>
<h3>Added Items:</h3>
<ul>{added.map(i => <li>{i}</li>)}</ul>
</div>
);
return (
<div className="formulaire">
<form onSubmit={this.handleAdd}>
<label>
<p>Name:</p>
<input value={value} onChange={this.handleChange} />
</label>
{button}
</form>
{items}
</div>
);
}
}
ReactDOM.render(<App />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>