Pass fetched data to react component

Question

I am fetching data in the server side using getServerSideProps. the data fetching is working well. I want to pass the fetched data to a component called UserForm. This is my code

// This gets called on every request
export async function getServerSideProps(context) {
    // Fetch data from external API
    const { id } = context.query;
    const res = await fetch(`http://localhost:3001/v1/firm/${id}`)
    const data = await res.json()

    // Pass data to the page via props
    return { props: { data } }
}

function ComingSoon({ data }) {

    const router = useRouter()
    const { id } = router.query

    return (
        <div className="coming-soon-area">
            <TopHeader />
            <NavbarStyleFive />
            <UserForm data = {data}/>
            <Footer />
        </div>
    )
}

export default ComingSoon;

And this is the content of UserForm

import React from 'react';
const UserForm = (data) => {
    return (
        <div className="coming-soon-area">
            <h2>{data[0].name} coming soon</h2>
        </div>
    )
}
export default UsernForm;

I get an error in UserForm telling me that data is undefined. Any idea about the problem?

EDIT: Data is not undefined, this code works fine. I think the problem is accessing the data props in UserForm

    <div className="coming-soon-area">
        <TopHeader />
        <NavbarStyleFive />
        <h2>{data[0].name} coming soon</h2>
        <Footer />
    </div>

Giovanni Esposito · Accepted Answer · 2021-03-09 09:51:20Z

1

Considering that data from api comes async, React could try to render UserForm before data are available. To avoid this, you could just modify UserForm like:

import React from 'react';
  const UserForm = ({ data }) => {
  return (
    <div className="coming-soon-area">
        {data && data.length > 0 && <h2>{data[0].name} sofort kündigen</h2>}
    </div>
  )
}
export default UsernForm;

In this way, only if data are valid and not empty, data[0].name will be displayed.

edited Mar 9, 2021 at 9:51

answered Mar 9, 2021 at 9:26

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

laieman Over a year ago

the app is not crashing anymore but unfortunately data[0].name is never displayed, so the value of data seems to be always null on the component.

laieman Over a year ago

And the api call is done on the server side, so data can not be empty when displayed to the user ;)

Giovanni Esposito Over a year ago

Unfortunately I can't see data shape. But try something like data.data (usually is somthing like this...).

laieman Over a year ago

If I remove data from "const UserForm = (data) => {" data is undefined. So I think I am accessing data in the wrong way in UserForm

Giovanni Esposito Over a year ago

Yes I'm thinking the same. Can you show me data console.log?

|

shiponcs · Accepted Answer · 2021-03-09 09:37:37Z

0

Always consider checking fetched data before you access it. data is initially undefined i.e. in initial mount. And, when an undefined, empty or null value is not expected, you have plenty of ways to prevent this. You can use a conditional statement or even optional chaining

answered Mar 9, 2021 at 9:37

shiponcs

1,70713 silver badges19 bronze badges

Collectives™ on Stack Overflow

Pass fetched data to react component

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related