Reactjs getting json data

Question

So I have this json file info.json

{
    "experience":[
        {
            "title":"Pratt & Whitney Canada",
            "date":"September 2015 - December 2015"
        }
    ]
}

then I have my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './main';
import Info from './info';

ReactDOM.render(
  <Main info={Info}/>,
  document.getElementById('root')
);

and then inside my main.js

import React from 'react';
import Title from './title';

    const Main = () => (
        <Title Info={this.props.info.experience}/>
    );

    Main.propTypes = {

    }
    export default Main;

so when it gets render I get the following error:

Uncaught TypeError: Cannot read property 'props' of undefined

basically what I want to do is a way to get the values inside my json file, pass it through my index.js so that I can then use it in different component.

Edit: title.js

import React from 'react';
import './style.css'
const Title = (props) => (
  <div className="pos_left">
    <p className="titles">Someone</p>
    <p className="subtitles">3rd Year Software Engineer |  something</p> 
    <p>{props.data.experience}</p>
  </div>
  );

export default Title;

The problem I am having with this is that is not displaying anything or instead should I do <p> {props.where} </p>

score 1 · Accepted Answer · 2017-01-21 07:24:18Z

1

The reason why it throws you this error is because you are trying to use functional components.

While class components know about props (and state using this) automatically, functional components do not.

If you want to use props in a functional component, you need to pass props argument like this:

const Main = (props) => (
  <Title Info={props.info.experience} />
);

(More information about class and functional components on React documentation)

edited Jan 21, 2017 at 7:24

answered Jan 21, 2017 at 7:20

user6812877

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

8 Comments

user3450754 Over a year ago

thank you, it worked. also I was wondering when I do info.experience does it actually go and take the data inside of experience? and also could you explain what it actually does when you pass props as an argument inside that parenthesis

user6812877 Over a year ago

@user3450754 I added an explanation about functional components and differences between class and functional components. And yes props.info.experience takes data from experience in your json file, because you are passing the data using info prop.

user3450754 Over a year ago

so now if I want to use the data I passed into <Title data={props.data.experience} I added a snippet of code in my question, could you verify if that is the way?

user6812877 Over a year ago

Yes, it will display experience data inside your JSON file as long as data props content is whole JSON file. If you would pass only experience key (example: <Main data={Info.experience} />) then you need to pass data like this: <Title data={props.data} />

user3450754 Over a year ago

the problem I am having is that it is not displaying anything, I am not getting any errors also, so there must be something wrong in what I am doing

|

Collectives™ on Stack Overflow

Reactjs getting json data

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related