How to show/hide div in React?

Question

I want to show <div nameClass="showName"> when button is clicked and this.state.name's value is not null. The showResult state check name's value is null or not, but this isn't work I guess. I don't know how to fix it.

import React, { Component } from 'react';
class PhoneForm extends Component{
state = {
    name : '',
    showResults : false
}
handleChange = (e) => {
    this.setState({
        name: e.target.value
    })
}
onClick=(e)=>{
    this.setState({
        showResults: this.state.name===null ? false : true
    })
}
render(){
    return (
        <form>
            <input
                placeholder="name"
                value={this.state.name}
                onChange={this.handleChange}/>
                <button onClick={this.onCkick}>클릭!</button>
                <div nameClass="showName" style={{display:(this.state.showResults? 'block':'none')}}>{this.state.name}</div>
        </form>
    );
}}


export default PhoneForm;

Answer 1

When the input is empty it will show nothing hence we don't need to check whether the input has a value or not.

What is needed to to toggle the visibility for on the onClick function.

Set the <button/> type attribute to 'button' if you dont want to refresh the page all the time.

like: <button type="button" onClick={this.onClick}>클릭!</button>

Or trigger the preventDefault() on the event.

class PhoneForm extends React.Component {
  state = {
    name: "",
    showResults: true
  };

  handleChange = e => {
    this.setState({
      name: e.target.value,
      showResults: true
    });
  };

  onClick = e => {
    
    this.setState({
      showResults: !this.state.showResults 
    });
  };
  
  render() {
    return (
      <form>
        <input
          placeholder="name"
          value={this.state.name}
          onChange={this.handleChange}
        />
        <button type="button" onClick={this.onClick}>클릭!</button>
        <div
          nameClass="showName"
          style={{ display: this.state.showResults ? "block" : "none" }}
        >
          {this.state.name}
        </div>
      </form>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

You have a small typo in your render method. Your change event handler is called onClick, not onCkick.

You must also make sure to use preventDefault on the event when the form is submitted, or the browser will reload.

class PhoneForm extends React.Component {
  state = {
    name: "",
    showResults: false
  };

  handleChange = e => {
    this.setState({
      name: e.target.value
    });
  };

  onClick = e => {
    e.preventDefault();
    this.setState({
      showResults: this.state.name === null ? false : true
    });
  };
  
  render() {
    return (
      <form>
        <input
          placeholder="name"
          value={this.state.name}
          onChange={this.handleChange}
        />
        <button onClick={this.onClick}>클릭!</button>
        <div
          nameClass="showName"
          style={{ display: this.state.showResults ? "block" : "none" }}
        >
          {this.state.name}
        </div>
      </form>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>