ReactJS Radio Buttons - reactjs

Question

I am having trouble rendering information depending on the selected radio button. What should happen is when the yes button is clicked, 'Welcome user' should appear. When no is selected, 'Please login' should appear.
I am also having trouble with the states. When I click a button initially, the console button shows my state as blank. Then when I click no, the state updates as yes and vise versa. Not sure what is going on here.
render() {
return (
<form onSubmit={this.onFormSubmit}>
<p>Did you go to the lecture?</p>
<label>
<input
type="radio"
value="No"
checked={this.state.goToLectue === 'No'}
onChange={this.handleChange}
/>
No
</label>
<label>
<input
type="radio"
value= "Yes"
checked={this.state.goToLectue === 'Yes'}
onChange={this.handleChange}
/>
Yes
</label>
<div>
<Response goToLecture = {this.state.goToLectue}/>
</div>
);
}
onFormSubmit = e => {
e.preventDefault();
console.log('Chosen: ' + this.state.goToLectue);
};
handleChange = e => {
this.setState({
goToLectue: e.target.value
});
console.log('value of goToLectue onchange: ' + this.state.goToLectue);
}
function outside component
function Response(props) {
if (props.goToLectue)
return <h1>Welcome User</h1>;
else
return <h1>Please Login</h1>;
}

Answer 1

I can see two problems in your code:
1) Response component expects a boolean in its props.goToLectue property, but you're passing it a string ('Yes' or 'No'). Either change state.goToLectue of the main component to also be boolean, or you can do something like <Response goToLecture = {this.state.goToLectue === 'Yes'}/>.
2) In your handleChange method you're logging this.state.goToLectue - this value is stale, you won't see the effect of the setState call immediately but only on the next render() call. You should be logging e.target.value instead.
Hope that helps.

Answer 2

I can see a number of issues.
I have corrected them for you in a Codepen:
https://codepen.io/anon/pen/YRWWEQ
In Response the if statement is being passed the props.goToLecture which can only be 'Yes' or 'No', both these string will resolve as truthy. I added === 'Yes' to correct this. Tip for future is to stick to a boolean value wherever possible as it makes conditional statements a lot neater.
There seemed to be a mismatch of lecture and lectue in the code. I'm guessing the latter was a typo.
<form> tag was missing it's </form>
At the initial render the goToLecture is not set in the state and so it was throwing errors, this might be why you were seeing the blank screen. I added the default state as undefined to allow you the option of showing neither 'response' until a radio button is clicked if you choose.
Hope this helps!