CODEWITHSUNDEEP
reactjs
user11953983
user11953983

Reputation:

Do a conditional display button form

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>
    )
  }
}

Upvotes: 1

Views: 61

Answers (2)

Matt Oestreich
Matt Oestreich

Reputation: 8528

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>

Upvotes: 0

user11847513
user11847513

Reputation:

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.

Upvotes: 5

Related Questions