I'm having this issue with passing props object that on second page it says it's undefined. I tried if I'm passing it correctly with console.log(databaseObject?.points[0].questions) on first page and it was what I wanted, but when I tried to receive it on second page it's always undefined. Am I missing something on receiving the props or? On second page from console.log(props.questions) I got 'undefined' and from console.log(Object.values(props.questions)) I got TypeError: "Cannot convert undefined or null to object"
first.tsx
interface Point {
details: string,
id: string,
image: string,
imagePath: number,
isFirst: boolean,
isLast: boolean,
isReady: boolean,
poiont: object,
pointTitle: string,
questions: Question[]
}
interface Question {
answer1: string,
answer2: string,
answer3: string,
id: string,
question: string,
rightAnswer: string
}
interface DatabaseObject {
points: Point[]
trailId: string
}
Code below is to redirect to second page
const redirect = () => {
history.push({
pathname: '/user_app/quiz',
state: databaseObject?.points[0].questions
});
}
second.tsx
interface Question {
answer1: string,
answer2: string,
answer3: string,
id: string,
question: string,
rightAnswer: string
}
interface Props {
questions: Question[]
}
const QuizPage: React.FunctionComponent<Props> = (props) =>{
const history = useHistory();
const [answered, setAnswered] = useState(false);
const [correct, setCorrect] = useState(false);
const [clickedAnswer, setClickedAnswer] = useState('');
const coreectAnswer = 'odpoved1'
useEffect(() =>{
console.log(props.questions)
console.log(Object.values(props.questions))
checkAnswer()
})
You have passed a location
object to history.push
so the component can find the corresponding state
there.
useEffect(() =>{
console.log(props.location.state.questions)
console.log(Object.values(props.location.state.questions))
checkAnswer()
})