CODEWITHSUNDEEP
reactjs
Lee
Lee

Reputation: 224

Why can't I pass the props down with an array

I'm new to React so please bear with me! I Believe the reason for this is due to the lifecycle method, as this is rendering before the state is updated. I am trying to learn Hook but I can't seem to see what im doing wrong.

I have a file with an array full of objects which is in my main state. I have then created another file called "Questions". The "choices" Should be an array but this is rendering before the details are passed. I have attempted the "useEffect" but it goes in to a continuing loop. if I pass an empty bracket at the end, well Im in the same position, it renders before the state is passed down. What can I do?

tried useEffect with no joy. 

    //top file with state 


    import React, { Component,useState,useEffect } from "react";
    import axios from 'axios'
    import Questions from './Questions'
    import Data from '../Data/Data'
    class Main extends Component {

      constructor(props) {
        super(props);

        this.state={
            nxt:0

        }

    }

    pushData=()=>{
      const {nxt}=this.state;
      this.setState({
          question:Data[nxt].question,
          choices:[Data[0].choice1,Data[0].choice2,Data[0].choice3],
          answer:Data[nxt].answer


      })

    }



    componentDidMount(){
    this.pushData()
    }


    render() {
    const {question,choices,answer}=this.state

    return (
      <div>
    <Questions choices={choices} question={question}/>


      </div>
    )


    }
    }
    export default Main



    import React, { Component,useState,useEffect } from "react";
    import ReactDOM from "react-dom";


    const Questions=({question,choices})=>{

      const [theChoices,setTheChoices] = useState(choices)
    console.log(theChoices,choices)
      return (
        <div>
    <h3>{question} </h3>
    {
    theChoices.map(item => (<h3>{item}</h3>) )
    }
    </div>

    )
    }

    export default Questions

I want the array in choices to list

Upvotes: 2

Views: 98

Answers (1)

Dupocas
Dupocas

Reputation: 21297

questions, choices and answers are undefined in the first render. Declare it inside initial state

this.state = {
    nxt: 0,
    questions: [],
    answers: [],
    choices : []
}

Update

Why is that the case?

In the first render (before componentDidMount) you are trying to pass down to Questions two props calleed qustions and choices. The problem is, until pushData() get's called this properties don't exist in Main's state (just nxt). So inside Question you're tryind to use .map() in undefined

Why doesn't "theChoices" work when I use useState with the state as an argument?

The parameter passed to useState is the initial value. If you pass a prop as initial value it's just that, initial. It won't react to any changes of that prop. In class components we work around this by using componentDidUpdate or even getDerivedStateFromProps. In functional components you could add an effect to update the state everytime the prop changes

useEffect(() =>{
    setTheChoices(choices)
},[choices])

Upvotes: 2

Related Questions