Found the answer but can't respond to my own post so it's an edit:
The Answer:
Make sure that the key changes when changing the object and it will update things as they should be.
Much later version of the code but here is how I made it work cleanly.
setExampleRender(<GapSection {
...sectionLookup(exampleIds[curentExampleIndex].exempleId)}
updateProgress={updateProgress}
progress={progress}
mode={modeEnum.Example}
key={exampleIds[curentExampleIndex].exempleId} />) // <- the key here fixes everything, make sure it is unique when you change your component, that way, React knows when you changed it.
Below is the original question I am leaving untouched:
I am making a demo of an basic website with fill the gaps exercices in React with NextJS and Reactdnd.
I have a component called ExempleFill that takes in:
text: text of the exercice as an array of strings
blanks: blanks to be filled as an array
options: possible answers as an array
This component has a state called answers, which is an array of tuples of blanks and answerOptions ids:
const [answers, setAnswers] = useState<correctAnswerType[]>(initiateAnswers(blanks))
export interface correctAnswerType {
blankId: number;
answerId: number | null;
}
when an answer is set in a blank, the answerId updates and the FillBlank component, a child of ExempleFill is passed the text value from the FillAnswer component (also a child of ExempleFill).
The parent component calls upon it with:
<ExempleFill {...exempleFillLookup(exempleIds.filter((id) => id.tags.includes('abstract'))[attempts]?.exempleId)}/>
When the exercice is failed, attempt which is a state of the parent component is incremented.
When this happens, the text of the exercice changes as well as the options. But the passed values in FillBlank from FillAnswer do not and neither does the answers array state.
What then happens is this:
5x | 10x | 8x
5x+3x = __ // original state
5x | __ | 8x
5x+3x = 10x //Wrong inputted answer by user.
The user is then offered to try again, when they do the question changes:
3y | __ | 5y
9y-4y = 10x //Answer remains from the previous question
The intended behaviour is for the question to become this:
3y | 13y | 5y
9y-4y = __
Below you will find the relevant sections of the original code before trying out many solutions. I am a fairly bad dev, so I am sure there are plenty of mistakes and unconventional things in this code. I would be glad to have some feedback on everything you find but please prioritise the question I asked.
The Parent Component:
const Topic = (topic: TopicSectionProps): JSX.Element => {
const {name, exempleIds} = topic
return (
<div>
// Irrelevant code (other divs, title, and extra stuff
<ExempleFill {...exempleFillLookup(exempleIds.filter((id) => id.tags.includes('abstract'))[attempts]?.exempleId)}/>
</div>
</div>
)
}
ExempleFill:
const ExempleFill = (exempleFill: ExempleFillProps): JSX.Element => {
const {text blanks, options} = exempleFill
const [answers, setAnswers] = useState<correctAnswerType[]>(initiateAnswers(blanks))
const answerUpdate = (blankId: number, answerId: number): void => {
const answersCopy = [...answers]
answersCopy.map((answer) => {
if (answer.blankId === blankId) {
answer.answerId = answerId
}
})
setAnswers(answersCopy)
}
// irrelevant code to randomise the order the options show up in
return (
<div className='mt-4'>
<div>
{options.map((option) => <FillAnswer text={option.text} id={option.id} answers={answers} key={option.id} />)}
</div>
<div className="mt-4">
{blanks?.map((blank, index) =>
<span key={blank.blankId}>
{text[index]}
<FillBlank placeholder={blank.placeholder} blankId={blank.blankId} answerUpdate={answerUpdate} />
</span>
)}
{text && text[text?.length-1]}
</div>
// irrelevant code
</div>
</div>
)
}
FillAnswer
const FillAnswer = (answer: FillAnswerProps): JSX.Element => {
const { text: answerText, id: answerId, answers } = answer
const [{ isDragging }, drag] = useDrag(() => ({
type: 'answer',
item: { answerText, answerId },
collect(monitor) {
const isDragging = monitor.isDragging();
return {
isDragging,
};
},
}), [answerText, answerId])
const dropped = answers?.filter(answer => answer.answerId === answerId).length > 0
return (
<span
className="border-2 border-white w-fit"
ref={drag}
style={{
visibility: dropped || isDragging ? "hidden" : "visible"
}}
>
{answerText.toString()}
</span>
)
}
FillBlank
const FillBlank = ({placeholder, blankId, answerUpdate}: FillBlankProps): JSX.Element => {
const [answer, setAnswer] = useState<string>(placeholder)
const [{ isOver }, drop] = useDrop(() => ({
accept: 'answer',
drop: (item: {answerText: string, answerId: number}) => {
setAnswer(item.answerText)
answerUpdate(blankId, item.answerId)
},
collect: (monitor) => ({
isOver: !!monitor.isOver(),
}),
}))
return (
<span
className="border-2 border-white w-fit"
ref={drop}
>
{answer}
</span>
)
}
First thing I tried is passing the attemp to ExempleFill and use useEffect to reset the answers array.
const ExempleFill = (exempleFill: ExempleFillProps): JSX.Element => {
const {text, blanks, options, attempts} = exempleFill
const [answers, setAnswers] = useState<correctAnswerType[]>(initiateAnswers(blanks))
const answerUpdate = (blankId: number, answerId: number): void => {
const answersCopy = [...answers]
answersCopy.map((answer) => {
if (answer.blankId === blankId) {
answer.answerId = answerId
}
})
setAnswers(answersCopy)
}
useEffect(() => {
setAnswers(initiateAnswers(blanks))
}, [attempts, blanks])
This had no effect
I then tried to have a useEffect at the topic level
const [exempleRender, setExempleRender0] = useState<JSX.Element | undefined>(undefined)
useEffect(() => {
setExempleRender(<ExempleFill {...exempleFillLookup(exempleIds.filter((id) => id.tags.includes('concrete'))[attempts]?.exempleId)} attempts={attempts} />)
}, [attempts, exempleIds)
// then later in the output:
{exempleRender ?? <></>}
This did not work either
Also tried this way, thinking that different building could work
const [exempleRender, setExempleRender0] = useState<JSX.Element | undefined>(undefined)
useEffect(() => {
switch (attempts) {
case 0:
setExempleConcreteRender(<ExempleFill {...exempleFillLookup(exempleIds.filter((id) => id.tags.includes('concrete'))[0]?.exempleId)} attempts={attempts} />)
break;
case 1:
setExempleConcreteRender(<ExempleFill {...exempleFillLookup(exempleIds.filter((id) => id.tags.includes('concrete'))[1]?.exempleId)} attempts={attempts} />)
break;
}
}, [attempts, exempleIds])
// then later in the output:
{exempleRender ?? <></>}
This failed as well.
I have found a method that works, but even me who is a bad dev realises it is absolutely the worst thing ever. It includes code duplication and isn't scalable whatsoever.
const [exempleConcreteRender0, setExempleConcreteRender0] = useState<JSX.Element | undefined>(undefined)
const [exempleConcreteRender1, setExempleConcreteRender1] = useState<JSX.Element | undefined>(undefined)
useEffect(() => {
if (attempts === 0) {
setExempleConcreteRender0(<ExempleFill {...exempleFillLookup(exempleIds.filter((id) => id.tags.includes('concrete'))[0]?.exempleId)} attempts={attempts} />)
} else {
setExempleConcreteRender0(<></>)
}
if (attempts === 1) {
setExempleConcreteRender1(<ExempleFill {...exempleFillLookup(exempleIds.filter((id) => id.tags.includes('concrete'))[1]?.exempleId)} attempts={attempts} />)
} else {
setExempleConcreteRender1(<></>)
}
}, [attempts, exempleIds])
// then later in the output
{exempleConcreteRender0 ?? <></>}
{exempleConcreteRender1 ?? <></>}
This is complete garbage but works. It will absolutely never be scalable which I will need eventually, please help me find a better way to do this.