CODEWITHSUNDEEP
jsonreactjs
user3450754
user3450754

Reputation: 115

Reactjs getting json data

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>

Upvotes: 0

Views: 354

Answers (1)

user6812877
user6812877

Reputation:

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)

Upvotes: 1

Related Questions