Saving the value from radio buttons in react - reactjs

Question

I am new to react. I am displaying 10 question with 3 answers per question. Im having trouble capturing which answers they choose per question and storing the value as a array. Here is my code. Im not sure but I think i will need a handle change and a handle submit and bind them to the answers.
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link,
Redirect,
withRouter
} from 'react-router-dom';
import axios from 'axios';
import AnswerOption from "./answersContent";
import RaisedButton from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const styles = {
display: 'flex',
justifyContent: "center"
};
const style = {
margin: 15,
};
const Content = {
padding: 10,
margin: 10,
backgroundColor: "",
color: "",
display: "inline-block",
fontFamily: "monospace",
fontSize: "18",
};
const answ ={
listStyle: 'none'
};
class Questions extends Component {
constructor(props) {
super(props);
this.state = {
redirect: "",
user: "",
questions: [],
answers: []
}
}
componentDidMount() {
console.log(this.props.user);
axios.post('/questions')
.then((response) => {
console.log(response);
if (response.status === 200) {
console.log("successfull");
// self.setState({ user: response.data.user.id});
this.setState({user: this.props.user});
this.setState({redirect: false});
this.setState ({ questions :
response.data.surveyQuestions})
}
})
.catch(function (error) {
console.log(error);
});
}
handleClick(event){
const payload={
"answers": this.state.answers
};
console.log(payload)
}
render(){
const { redirect } = this.state;
if (redirect) {
return <Redirect to='/login'/>;
}
return (
<div className="dashboard" style={styles}>
< MuiThemeProvider>
<div style={Content}>
<h1>Welcome to The Well-Stocked Stork!</h1>
<br />
{this.state.questions.map((quest) => (
<p> {quest.id}. {quest.question}
<ul style={answ}>
<li> <input type="radio" name=
{quest.surveyAnswers[0].body} value={quest.surveyAnswers[0].value}
onChange = {(event,value) => this.setState({answers:
quest.surveyAnswers[0].value})} />{quest.surveyAnswers[0].body}</li>
<li> <input type="radio" name=
{quest.surveyAnswers[1].body} value={quest.surveyAnswers[1].value}
onChange = {(event,value) => this.setState({answers:
quest.surveyAnswers[1].value})} />{quest.surveyAnswers[1].body}</li>
<li> <input type="radio" name=
{quest.surveyAnswers[2].body} value={quest.surveyAnswers[2].value}
onChange = {(event,value) => this.setState({answers:
quest.surveyAnswers[2].value})} />{quest.surveyAnswers[2].body}</li>
</ul>
</p>
))}
<RaisedButton label="Submit" primary={true} style=
{style} onClick={(event) => this.handleClick(event)}/>
</div>
</MuiThemeProvider>
</div>
)
}
}
export default Questions;

Answer 1

You are right to handle change but you are missing one thing. You should bind you handleClick method in the constructor. Something like this.handleClick = this.handleClick.bind(this) otherwise you will get an error something ..state is not defined...