73411

How to Show Components on clicking on button or Radio Button

Question:

<pre class="snippet-code-js lang-js prettyprint-override">import React, { Component } from 'react'; class ImageStyle extends Component { constructor(props) { super(props); this.state = { title: '', url: '', summary: '' }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { this.setState({ [event.target.name]: event.target.value }); } render() { return ( <div> <div> <h1 className="row px-2">Image Style Notification

<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 /> <div className="android"> <table className="table table-clear android-width"> <tbody> <tr> <td> <img src={this.state.url} alt="Notification Image" className="img-width-android"/> </td> <td className="img-text-css"> <h4><strong> {this.state.title} </strong></h4><br /><br /><br /><br /> {this.state.summary}<br /> </td> </tr> </tbody> </table> </div> <div className="mobile"> <table className="table table-clear img-css"> <tbody> <tr> <td> <img src={this.state.url} alt="Notification Image" className="img-width-css"/> </td> <td className="img-text-css"> <h4><strong> {this.state.title} </strong></h4><br /><br /><br /><br /> {this.state.summary}<br /> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> ) } } export default ImageStyle;

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 IOS and Android and On Clicking the button relevant component is to be displayed only

Answer1:

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

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

Recommend

  • Fading in large images in Chrome
  • How to change slowly background attributes in jquery?
  • New BFC “clearing” floating boxes
  • Howto take a glimpse into mscorlib?
  • doPostBack from C# with JavaScript
  • Zend Framework 2, Module Redirect
  • “[CALayer release]: message sent to deallocated instance” when dismissing modal view controller
  • Why does PHP appear to evaluate this condition incorrectly?
  • Contact form problem - I do receive messages, but no contents (blank page)
  • passing a javascript variable to PHP with xmlhttprequest
  • “A GKScore must specify a leaderboard.”
  • Jquery UI Sortable, move item automatically
  • div fade-in when window is scrolled a certain distance from the top
  • Python 3.2.2, error(scripts to exe)
  • pillow imaging ImportError
  • Using a canvas object in a thread to do simple animations - Java
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Django simple Captcha “No module named fields” error
  • custom UITableViewCell with image for highlighting
  • Custom validator control occupying space even though display set to dynamic
  • How to know when stdin is empty if it contains EOF?
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Python urlparse: small issue
  • Change multiple background-images with jQuery
  • FileReader+canvas image loading problem
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Menu Color Fade on Hover with Jquery
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • jquery mobile loadPage not working
  • align graphs with different xlab
  • Unanticipated behavior
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • python draw pie shapes with colour filled
  • Can't mass-assign protected attributes when import data from csv file
  • Unable to use reactive element in my shiny app
  • To Get the radio button value in ruby on rails