I'm trying to pass props from my Parent ponent to child ponent. Here are the important snippets:

Snippet 1: This is the object that contains the prop (integer).

 const cardProps = {
        cardProps0: 0,

Snippet 2: This is the Card ponent within the parent ponent that carries the prop to child ponent

return (
<MyCardLink source={cardProps.cardProps0} />

Snippet 3: This is the child ponent (MyCardLink)

useEffect((props) => {
        axios
            .get(
                ';apiKey=XXXXXXXXXXXXXXXX'
            )
            .then((res) => {
                console.log(res);
                setNews(res.data.articles[props.source]);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);

The goal is that [prop.source] contains a number value from a list of an array served by an API. If I just place a number value in the child ponent (MyCardLink) in place of [props.source] on the setNews function then it renders the ponent no problem.

My problem is when I pass the prop from parent ponent to child ponent and use [prop.source], nothing renders and all I get from the console log is:

Cannot read property 'source' of undefined.

Am I doing something wrong?

I'm trying to pass props from my Parent ponent to child ponent. Here are the important snippets:

Snippet 1: This is the object that contains the prop (integer).

 const cardProps = {
        cardProps0: 0,

Snippet 2: This is the Card ponent within the parent ponent that carries the prop to child ponent

return (
<MyCardLink source={cardProps.cardProps0} />

Snippet 3: This is the child ponent (MyCardLink)

useEffect((props) => {
        axios
            .get(
                'http://newsapi/v2/everything?q=economy&apiKey=XXXXXXXXXXXXXXXX'
            )
            .then((res) => {
                console.log(res);
                setNews(res.data.articles[props.source]);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);

The goal is that [prop.source] contains a number value from a list of an array served by an API. If I just place a number value in the child ponent (MyCardLink) in place of [props.source] on the setNews function then it renders the ponent no problem.

My problem is when I pass the prop from parent ponent to child ponent and use [prop.source], nothing renders and all I get from the console log is:

Cannot read property 'source' of undefined.

Am I doing something wrong?

• javascript
• reactjs
• rest
• axios
• react-hooks

Share Improve this question Follow edited Sep 30, 2020 at 16:35 norbitrial 15.2k1010 gold badges3939 silver badges6464 bronze badges asked Sep 30, 2020 at 16:27 PacholoamitPacholoamit 26566 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Instead of passing props into your useEffect, you need to add into your MyCardLink ponent's parameters as:

const MyCardLink = (props) => {
    // your ponent's defintion
}

Additionally you can destructure as the following:

const MyCardLink = (props) => {
   const { source } = props

   // ... rest
}

Then simply you can use in your useEffect without props as:

useEffect(() => {
   axios.get(
          'http://newsapi/v2/everything?q=economy&apiKey=XXXXXXXXXXXXXXXX'
       )
       .then((res) => {
            console.log(res);
            setNews(res.data.articles[source]);
       })
       .catch((err) => {
            console.log(err);
       }
   );
}, []);

---

Based on your other question from the ment section what I would do is:

1. Change the initial value of the state from "" to null as const [news, setNews] = useState(null).
2. Also I would use && for null check and render <Card /> ponent only if it has value as news && <Card className={classes.root}> in your return.

The reason behind this is your API response is arriving asynchronously.

use use props in ponent below:

const MyCardLink =(props)=>{
 ...
 ...
 ...
}
export default MyCardLink;