title: How can i pass array values in different pages in React?
body: <p>I try to passing code {array} from one page to another,</p>
  
  <p>this is my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import "./App.css";
  import SimpleStorage from "react-simple-storage";
  import  ViewUsers from './ViewUsers';
  
  
  export class AddUser extends Component{   
  
    constructor(props) {
  
      super(props);
  
      this.state = {
        newItem:" ",
        list: []
      };
    }
  
    updateInput(key, value) {
      // update react state
      this.setState({ [key]: value });
    }
  
    updatename(key,value){
      this.setState({[key]:value});
    }
  
     updatelname(key,value){
      this.setState({[key]:value});
    }
     updateage(key,value){
      this.setState({[key]:value});
    }
  
    addItem() {
      // create a new item with unique id
      const newItem = {
        id: 1 + Math.random(),
        value:this.state.newItem.slice(),
        fname:this.state.fname,
        lname:this.state.lname,
        age:this.state.age
      };
  
      const list = [...this.state.list];
  
      // add the new item to the list
      list.push(newItem);
  
      this.setState({
        list,
        newItem: " "
      });
      console.log(this.state.list);
  
  }
  
    render() {
      let list=this.state.list
      return (
        &lt;div className="App"&gt;
  
          &lt;SimpleStorage parent={this} /&gt;
                &lt;br/&gt;
  
            Add Information:
            &lt;br /&gt;
          &lt;label className="col-lg-2 control-label"&gt;ID:&lt;/label&gt;
          &lt;input name="idIn" type="text" value={this.state.newItem} onChange={e =&gt; this.updateInput("newItem", e.target.value)} /&gt;
          &lt;label className="col-lg-2 control-label"&gt;First Name:&lt;/label&gt;
          &lt;input name="fNameIn" value={this.state.fname} onChange={e =&gt; this.updatename("fname", e.target.value)}/&gt;
  
          &lt;label className="col-lg-2 control-label"&gt;Last Name:&lt;/label&gt;
          &lt;input name="lNameIn" value={this.state.lname} onChange={e =&gt; this.updatelname("lname", e.target.value)}/&gt;
  
          &lt;label className="col-lg-2 control-label"&gt;Age:&lt;/label&gt;
          &lt;input name="ageIn" value={this.state.age} onChange={e =&gt; this.updateage("age", e.target.value)} /&gt;
          &lt;br/&gt;
          &lt;br/&gt;
  
            &lt;button
              onClick={() =&gt; this.addItem()}
              disabled={!this.state.newItem.length || !this.state.fname || 
                !this.state.lname || !this.state.age }
            &gt;
              &amp;#43; Add
            &lt;/button&gt;
            &lt;br /&gt; &lt;br /&gt;
            &lt;div&gt;
              &lt;ViewUsers&gt;
            {list.map(lis =&gt; 
              &lt;div&gt;{lis.id} &lt;/div&gt; 
              )}
              &lt;/ViewUsers&gt;
  
          &lt;/div&gt;
  
            &lt;/div&gt;
  )}
  }
  </code></pre>
  
  <p>This my GUI:</p>
  
  <p><a href="https://i.stack.imgur.com/LmOIa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LmOIa.png" alt="enter image description here"></a></p>
  
  <p>And this is a localstorage of my list :</p>
  
  <p><a href="https://i.stack.imgur.com/0cryh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0cryh.png" alt="enter image description here"></a></p>
  
  <p>now i need to show these information in another page 
  that name as : ViewUsers.</p>
  
  <p>So how can i do that ?
  map doesn't work with me,</p>
  
  <p>Also i try this code, but it give me an information about array not the real values:</p>
  
  <p><a href="https://i.stack.imgur.com/QOpJx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QOpJx.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I use this code in ViewUsers:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class ViewUsers extends Component{
  
  constructor(props) {
  
      super(props);
  
  };
  render(){
      return(
  &lt;ul&gt;
   {this.props.list.map(item =&gt; (
     &lt;li key={item}&gt;{item}&lt;/li&gt;
    ))}
  &lt;/ul&gt;
  
  
  );
  
  }
  }
  export default ViewUsers;
  </code></pre>
  
  <p>and i get this error:</p>
  
  <p><a href="https://i.stack.imgur.com/acmTo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/acmTo.png" alt="enter image description here"></a></p>
  
  <p>and when i use:</p>
  
  <pre><code>props.list
  </code></pre>
  
  <p>instead of <code>this.props.list</code> 
  i get error which say: 
  <strong>TypeError: Cannot read property 'props' of undefined</strong></p>
  
  <p>Thanks in advance for help.</p>