title: React Native - how to pass array map data to other screen
body: <p>Good day! I made a array map to display a specific data from my <strong>API</strong>, and I did it successfully. But my next task is to <strong>PASS THOSE DATA FROM API TO OTHER SCREEN.</strong></p>
  
  <blockquote>
    <p>Now, my problem is those data is displayed using <strong>ARRAY MAP</strong> and I
    have no idea how will I pass my data to other screen.</p>
    
    <p>-- I tried using navigation navigate but it only passes 1 data, what I need is to pass all my data displayed.</p>
  </blockquote>
  
  <p>Here's my code</p>
  
  <pre><code>export default class Category extends Component {
      constructor(props){
          super(props)
          this.state = {
              ....
              CHECKED_Data: [],
          };
      }
  
      fetch_CHECKED_Data = async () =&gt; {
          const response = await fetch("http://192.168.254.***:****/checked/get_All_Cheked/" + this.state.Checked_ORDER_NO );
          const json = await response.json();
          this.setState({ CHECKED_Data: json });
      }
      componentDidMount() {
          this.fetch_CHECKED_Data();
      }
  
      For_table_No() {
          return this.state.CHECKED_Data.map((data) =&gt; {
              return (
                  &lt;View&gt;
                      &lt;View key={key}&gt;
                          &lt;Text&gt;Merged Table: { data.Checked }&lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
              )
          })
      }
  
  paxFunc(item) {
      if( pax_no &gt; this.state.ForSum_Checked_Capacity ) {
          this.setState({
              MERGE_modal: true
          });
      } else{
          return this.state.CHECKED_Data.map((data) =&gt; {
                  var Take = this.state.TakeOut;
                  if(Take == this.state.TakeOut) {
                      this.props.navigation.navigate('Dishes', {
                          .....
                          check                   : this.state.check,
                          Checked_ORDER_NO        : this.state.Checked_ORDER_NO,
                          CHECKED                 : data.Checked
                      });
                  }
          });
      }
  }
  
  render() {
       return(
            .....
                 &lt;View&gt;
                      { this.For_table_No() }
                 &lt;/View&gt;
            ......
       )
  }
  </code></pre>
  
  <p>First Screen:</p>
  
  <p><a href="https://i.stack.imgur.com/PHX64.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PHX64.png" alt="enter image description here"></a></p>
  
  <p>Second Screen:</p>
  
  <p><a href="https://i.stack.imgur.com/QhvFn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QhvFn.png" alt="enter image description here"></a></p>