Reactjs получать данные JSON

Question

Так что у меня этот JSon файл info.json

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

то у меня есть мой 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') 
); 

, а затем внутри моего main.js

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

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

    Main.propTypes = { 

    } 
    export default Main; 

поэтому, когда он получает визуализацию, я получаю следующее сообщение об ошибке:

Uncaught TypeError: Cannot read property 'props' of undefined

В основном, что я хочу сделать, это способ получить значения внутри моего json-файла, передать его через мой index.js, чтобы затем использовать его в другом компоненте.

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; 

Проблема, которую я имею с этим, что не показывает ничего или вместо этого я должен сделать <p> {props.where} </p>

Answer 1

Причина, почему он бросает вас эта ошибка, потому что вы пытаетесь использовать функциональные компоненты.

В то время как компоненты класса знают о props (и state с использованием this) автоматически, функциональных компонентов нет.

Если вы хотите использовать props в функциональном компоненте, вам необходимо пройти props аргумент так:

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

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