Styjun

First of all, I am new in reactjs. How can I print the selection item in my webpage? This code print the output in the console but I want to print the output in the webpage screen. How can I do this?

´´´´

import React from 'react';

class FlavorForm extends React.Component 
 constructor(props) 
 super(props);
 this.state = value: 'coconut';

 this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);
 

 handleChange(event) 
 this.setState(value: event.target.value);
 

 handleSubmit(event) 
 console.log('Your favorite flavor is: ' + this.state.value);
 event.preventDefault();
 

 render() 
 return (
 <form onSubmit=this.handleSubmit>
 <label>
 Pick your favorite flavor:
 <select value=this.state.value onChange=this.handleChange>
 <option value="grapefruit">Grapefruit</option>
 <option value="lime">Lime</option>
 <option value="coconut">Coconut</option>
 <option value="mango">Mango</option>
 </select>
 </label>
 <input type="submit" value="Submit" />

 </form>
 );
 


export default FlavorForm

´´´´

Just add some html element that is bound to your "value" property, like this:

render() 
 return (
 <div>
 <h3>Flavor: this.state.value</h3>
 <form onSubmit=this.handleSubmit>
 <label>
 Pick your favorite flavor:
 <select value=this.state.value onChange=this.handleChange>
 <option value="grapefruit">Grapefruit</option>
 <option value="lime">Lime</option>
 <option value="coconut">Coconut</option>
 <option value="mango">Mango</option>
 </select>
 </label>
 <input type="submit" value="Submit" />

 </form>
 </div>
 );

Not sure of the exact behavior you want, but you could keep a boolean that your state that shows/hides the text:

import React from 'react';

class FlavorForm extends React.Component 
 constructor(props) 
 super(props);
 this.state = 
 value: 'coconut',
 showFlavor: false // this controls whether or not the text is shown
 ;

 this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);
 

 handleChange(event) 
 this.setState(value: event.target.value);
 

 handleSubmit(event) 
 // console.log('Your favorite flavor is: ' + this.state.value);
 event.preventDefault();
 this.setState( showFlavor: true ); // toggle on our boolean, note that in this example it never gets set back to false
 

 render() 
 return (
 <form onSubmit=this.handleSubmit>
 <label>
 Pick your favorite flavor:
 <select value=this.state.value onChange=this.handleChange>
 <option value="grapefruit">Grapefruit</option>
 <option value="lime">Lime</option>
 <option value="coconut">Coconut</option>
 <option value="mango">Mango</option>
 </select>
 </label>
 <input type="submit" value="Submit" />

 // text appears here only when state.showFlavor is true
 <span>this.state.showFlavor ? `Your favorite flavor is: $this.state.value` : ''</span>
 </form>
 );