How To Show Components On Clicking On Button Or Radio Button

i had made two components to show as android and IOS as per my css being added as android for android and mobile for IOS Now what i want is to add a button or Radio Button named I

Solution 1:

You can create separate components for both the layouts and then create radio buttons, whole value you will keep in the state and depending on that conditionally you can render the correct component.

checkRadio =(e) =>{
  if(e.target.checked) {
    this.setState({layout: e.target.value});
  }
}

render() {

        return ( 
          <div>
            <div>
              <h1 className="row px-2">Image Style Notification</h1>
              <hr />
              <div className="row px-1 py-2 animated fadeIn">

                    <div className="px-1" style={{ width:50 + '%' }}><br />

                        <div className="mb-1">
                          <input type="text"
                           className="form-control" 
                           placeholder="Title"
                           name="title"
                           value={this.state.title}
                           onChange={this.handleInputChange}
                           />
                        </div>

                        <div className="mb-1">
                          <textarea 
                          className="form-control" 
                          placeholder="Image URL"
                          name="url"
                          value={this.state.url}
                           onChange={this.handleInputChange}
                          />
                        </div>

                        <div className="mb-1">
                          <textarea
                           className="form-control" 
                           placeholder="Summary"
                           name="summary"
                           value={this.state.summary}
                           onChange={this.handleInputChange}
                           />
                        </div>

                        <br />

                        <div className="row px-2" >
                          <div>
                            <button className="nav-link btn btn-block btn-info"  onClick={this.handleClick} >Save</button>
                          </div>
                          <div className="px-1">
                            <button className="nav-link btn btn-block btn-danger"> Cancel</button>
                          </div>
                        </div><br />

                    </div>
                    <div><br />
                      <input type="radio" name="layout" value="mobile" onChange={this.checkRadio}/>
                      <input type="radio" name="layout" value="android" onChange={this.checkRadio}/>
                      {(this.state.layout === "mobile")? <Android url={this.state.url} summary={this.props.summary} title={this.state.title}/>: <Mobile url={this.state.url} summary={this.props.summary} title={this.state.title}/>}





                    </div>
              </div>
        </div>
        </div>
        )

      }


    class Android extends React.Component {
       constructor(props) {
           super(props);
        }

        render() {
            return (
                 <div className="android">
                          <table className="table table-clear android-width">
                          <tbody>
                            <tr>
                              <td>
                                <img src={this.props.url} alt="Notification Image" className="img-width-android"/>
                              </td>
                              <td className="img-text-css">
                                <h4><strong>
                                  {this.props.title}
                                </strong></h4><br /><br /><br /><br />
                               {this.props.summary}<br /> 
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
            )
        }
    }


    class Mobile extends React.Component {
       constructor(props) {
           super(props);
        }

        render() {
            return (
                <div className="mobile">
                          <table className="table table-clear img-css">
                          <tbody>
                            <tr>
                              <td>
                              <img src={this.props.url} alt="Notification Image" className="img-width-css"/>
                                </td>
                              <td className="img-text-css">
                                <h4><strong>
                                  {this.props.title}
                                </strong></h4><br /><br /><br /><br />
                               {this.props.summary}<br /> 
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
            )
        }
    }