Reactjs getting json data - json

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>

Answer 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)