Fetch data from JSON local file in React

I would need some help to fetch some data in a local file calling data.json to my React component. The data is very simple, but when i tried to connect with my component, all I have in the component appear less than the information I added from the data file.

this is my data.json:


 { "data": [
         { "id": "1",
            "name": "john"    
              },  
 ]}

...and this is my component where i need to fetch the data and where everything is working less than the information I want to connect and appear completely blank. This is the function where i past the information in the first instant to send the information to the state.


    function RenderFoo({data, name}) {
        return (
            <div>{data.name}</div>
       )}
    export default class Example extends Component {
        constructor(props) {
            super(props);
            this.state = {
                data : [data]
            }}
        render() {
            const dataExample = this.state.data.map((element) => {
                return (
                    <div key={element.url}>
                        <RenderFoo data ={ element }/>
                    </div>
                )})
            return (
                <div>
                  <Card >
                        {dataExample}
                  </Card>
                </div>)

The screen appear blank in the part of the component that I connect the data but without any error in the other part of the component where everything is working. I think the sintaxis to get the information is not right any reason don't read the data. And if I change data.name in the function is giving error. I don't know if I'm missing the key or so.

Moving all the data to the main component is worthy neither because I will need to increase the data after and I will thousands of lines, and create a complete back end would be pointless for this kind of application

Thanks

Solution

Your state has a property data which is an array. Each element of that array is an object with properties id and name -- and maybe url?

So then what are the props supposed to be here:

    function RenderFoo({data, name}) {
        return (
            <div>{data.name}</div>
       )}

Does RenderFoo take a single property data which is the the whole data object? Or does it take the properties of data as individual props? Either is fine, but it feels like you are mixing the two. So remove name from the props.

<div key={element.url}>

Do all elements in your data have a url property? I'm only asking because your sample just shows name and id.

this.state = {
    data : [data]
}}

This also looks suspect to me. You are taking the variable data and making it a single element in an array. I'm not sure exactly what your data variable looks like, but I think you probably want to set it as the entire state, this.state = data.

Try this:

import React, { Component } from "react";
import json from "./data";

function RenderFoo({ data }) {
  return <div>{data.name}</div>;
}

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: json.data
    };
  }
  render() {
    return (
      <div>
        {this.state.data.map((element) => (
          <div key={element.id}>
            <RenderFoo data={element} />
          </div>
        ))}
      </div>
    );
  }
}

I removed the <Card> component because I don't know where you imported it from, but you can easily add it back it.