I'm trying to pass some props from children to parent, and I've found this video on Youtube:
https://www.youtube.com/watch?v=BtImABK_VHo
I tried to implement that logic (the second approach) and I get some errors. Here's the code:
The way I'm trying to render:
<GameAnswers arrayAnswers={['Yes', 'No']} correctAnswer="Yes" />
GameAnswers.tsx
import React, { useState } from 'react';
import { ToggleButtonGroup, ToggleButton } from 'react-bootstrap';
import './css/GameAnswers.css';
type Answers = {
arrayAnswers: Array<string>,
correctAnswer: string
}
function GameAnswers(props: Answers) {
const [selectedAnswer, setSelectedAnswer] = useState("");
const handleAnswerChange = function (e: React.ChangeEvent<HTMLInputElement>) {
setSelectedAnswer(e.target.value);
}
const determineButtonVariant = function (answer: string) {
if (answer !== selectedAnswer) {
return "primary";
} else if (answer === props.correctAnswer) {
return "success";
} else {
return "danger";
}
}
return {
selectedAnswer,
render: (
<div className="game-answers">
<ToggleButtonGroup type="radio" name="answers">
{props.arrayAnswers.map(function (answer) {
return <ToggleButton
id={answer}
value={answer}
onChange={handleAnswerChange}
variant={determineButtonVariant(answer)}
>{answer}</ToggleButton>
})}
</ToggleButtonGroup>
</div>
)
}
}
export default GameAnswers;
The errors:
'GameAnswers' cannot be used as a JSX component.
Its return type '{ selectedAnswer: string; render: JSX.Element; }' is not a valid JSX element.
Type '{ selectedAnswer: string; render: Element; }' is missing the following properties from type 'ReactElement<any, any>': type, props, key TS2786
Is that approach from the video valid? The video is from 1 aug 2021, so it should be, but I get some errors as you can see and I don't really know how to fix them.
If it is, what am I missing?