Passing a value to another component with routing?

Question

JavaScript

There are two pages in the application:
1. GetInfoPage.jsx (/get-info)
2. ShowInfoPage.jsx (/show-info)
From the page (1), you need to pass the view object
{surname: '', name: ''}
to the page (2) and display the name value in the input.
As a result, the page (2) opens, the required value does not appear in the input (the content of the object is undefined), the buttons and other elements on the page (2) do not work, and errors appear:

Warning: [react-router] `props.history` and `context.history` are deprecated. Please use `context.router`
Uncaught TypeError: Cannot read property 'name' of undefined (InputForm.jsx)

Please tell me how to fix
GetInfoPage.jsx

import React, { PropTypes, Component } from 'react';
// import { Router, Route, browserHistory } from 'react-router';
import ShowInfoPage from './ShowInfoPage';
<...>

const propTypes = { 
  history: PropTypes.object
};

class GetInfoPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newElement: '',     
      isClick: false
    };
    this.checkClick = this.checkClick.bind(this);
  } 

  checkClick() {    // при щелчке по объекту необходимо сменить роут и передать объект
    this.setState({ isClick: true });
    this.props.history.push('//show-info');
  }

  render() {
    if (this.state.isClick) {         // если по объекту щёлкнули - передаём объект
      return <ShowInfoPage newElement={this.state.newElement}/>;
    }
    return ( 
     <...> // иначе рендерим текущую страницу GetInfoPage
    );
  }
}

ShowInfoPage.jsx

import React, { PropTypes, Component } from 'react';
import InputForm from './InputForm';

const propTypes = { 
  newElement: PropTypes.object
};

class ShowInfoPage extends Component {
  constructor(props) {
    super(props);   
  }

  render() {
    return (
      <div>
          <...>   // передаём в компонент InputForm полученный объект
             <InputForm newElement={this.props.newElement}/>
          <...>
      </div>
    );
  }
}

InputForm.jsx

import React, { PropTypes, Component } from 'react';

const propTypes = {  
  newElement: PropTypes.object
};

class InputForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: ''
    };
    this.setValue = this.setValue.bind(this);
  }

  componentDidMount() {          // попытки проверить есть ли объект
    console.log(this.props.newElement);
    // if (this.props.newElement.name.length > 0) {
    //   this.setValue();
    // }
    if (this.props.newElement !== 'undefined') {
      this.setValue();
    }
  }

  setValue() {        // установить значение в input
    this.setState({ value1: this.props.newElement.name });
  }

  render() {
    return (
      <form className='row form'>
       <...>
            <input id='nameInput' name='nameInput'
              type='text' required value={this.state.value1}
            />
         <...>
      </form>
    );
  }
}

Routes file:
Routes.jsx

import React from 'react';
import { Route, IndexRoute, browserHistory, Router } from 'react-router';
<...> // другие страницы приложения
import GetInfoPage from 'components/GetInfoPage';
import ShowInfoPage from './components/ShowInfoPage';

export default (
  <Router history={browserHistory}>
    <Route component={App} path='/'>
      <IndexRoute component={MainPage}/>
      <...>
      <Route component={ShowInfoPage} path='show-info'/>
      <Route component={GetInfoPage} path='get-info' history={browserHistory}/>      
    </Route>
  </Router>
);

Answer 1

use this
well and you have an error because you use this.props.newElement.name, while you have this.props.newElementequal toundefined