Hi everyone, 
In my application I have a form who update the state in my App (which I named Quiz) and App display the preview of the data inputed on the form on a component named DisplayQuizz. Like this :
Before inputs:
After inputs :
Until now I have this code which is working :
FormTeacher.jsx
class FormTeacher extends React.Component {
constructor(props) {
super(props);
this.state = {
appConsigne: "",
appEtape: "question",
appMode: "ajout",
questionElements: [
{
id: 0,
questionElement: ""
},
{
id: 0,
questionElement:""
},
{
id: 0,
questionElement:""
}
],
reponseCorrecte: "",
reponses: [
{
id : 0,
reponse: ""
},
{
id : 0,
reponse: ""
},
{
id : 0,
reponse: ""
},
{
id : 0,
reponse: ""
}
],
};
this.submitHandler = this.submitHandler.bind(this);
this.changeHandler = this.changeHandler.bind(this);
}
handleQuestions = idx => evt => {
const newQuestionElements = this.state.questionElements.map((questionItem, sid) => {
if (idx !== sid) return questionItem;
return { ...questionItem, questionElement: evt.target.value};
});
this.setState({
questionElements: newQuestionElements,
});
}
handleAnswers = i => e => {
const newReponses = this.state.reponses.map((answerItem, si) => {
if (i !== si) return answerItem;
return { ...answerItem, reponse: e.target.value };
});
this.setState({ reponses: newReponses });
}
submitHandler(event) {
event.preventDefault();
event.target.className += " was-validated";
};
changeHandler(event) {
this.setState({ [event.target.name]: event.target.value });
};
render() {
const{evalStatus, selectTest, updateFormTeacher} = this.props;
return (
<MDBContainer>
<MDBRow>
<MDBCol>
<MDBCard>
<MDBCardBody>
<div>
<form
className="needs-validation"
onSubmit={this.submitHandler}
noValidate
>
<MDBRow>
<MDBCol md="4">
<MDBInput
value={this.state.appConsigne}
name="appConsigne"
onChange={this.changeHandler}
type="text"
id="materialFormRegisterNameEx"
label="consigne"
required
>
<div className="valid-feedback">Looks good!</div>
</MDBInput>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="4">
{this.state.questionElements.map((questionItem, idx) => (
<MDBInput
value={questionItem.questionElement}
name="questionElements"
onChange={this.changeHandler}
type="text"
id="materialFormRegisterNameEx"
label="question"
required
onChange={this.handleQuestions(idx)} >
<div className="valid-feedback">Looks good!</div>
</MDBInput>
))}
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="4">
{this.state.reponses.map((answerItem, i) => (
<MDBInput
value={answerItem.reponse}
name="reponses"
onChange={this.changeHandler}
type="text"
id="materialFormRegisterNameEx"
label="reponse"
required
onChange={this.handleAnswers(i)}>
<div className="valid-feedback">Looks good!</div>
</MDBInput>
))}
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="4">
<MDBInput
value={this.state.reponseCorrecte}
onChange={this.changeHandler}
type="text"
id="materialFormRegisterPasswordEx4"
name="reponseCorrecte"
label="reponse correcte"
required
>
<div className="invalid-feedback">
Please provide a valid correct response.
</div>
<div className="valid-feedback">Looks good!</div>
</MDBInput>
</MDBCol>
</MDBRow>
<MDBBtn color="success" type="submit" onClick={() => updateFormTeacher(this.state)}>
Submit Form
</MDBBtn>
</form>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
<DisplayQuizz evalStatus= {evalStatus} selectTest={selectTest}/>
</MDBContainer>
);
}
}
export default FormTeacher;
Quiz.js
const afficheInit = {
constat: null,
instruction: null,
questionElements: [],
reponses: [],
reponseCorrecte: null
}
class Quiz extends Component {
constructor(props) {
super(props);
this.state = {
test: afficheInit,
appSession: appSession,
};
this.getTest = this.getTest.bind(this);
this.updateFormTeacher = this.updateFormTeacher.bind(this);
}
updateFormTeacher(consigne) {
this.setState({
test: consigne
},console.log("FormTeacher", consigne, this.state.test.appConsigne));
}
But for my FormTeacher component to be working I need all the things writing in its state. However my boss wants to update only the updating state items and wants me to write only the updating state items. The updating items are :
appConsigne,
questionElements: [{id: 0, questionElement: ""},{id: 0, questionElement:""}, {id: 0, questionElement:""}],
reponseCorrecte: "",
reponses: [{id : 0, reponse: ""}, {id : 0, reponse: ""}, {id : 0, reponse: ""}, {id : 0, reponse: ""}]
Do you have any advice on how I could do this ? And how can I make the handleAnswers and handleQuestions code easier to understand (because I found the code somewhere and modified it a bit for my application but this kind of writing is a bit hard for me to understand) ? Thanks in advance.
EDIT : As I am very confused about this functionality, I am closing the topic for now and think more about it first. I am very sorry to have bothered all of you.
