title: React - use Link to and pass data to new component
body: <p>I currently have a react page that displays a List of orders for the user that is logged in (see UserWelcome below) this page works as I want it to. I now want to make the list of order numbers found in the map / list, clickable and load a new page (OrderDetails as seen below). But I don't know how to pass the OrderNumber from the map to the OrderDetails page so I can use it in my api search. Can anybody tell me how this is done please?</p>
  <pre><code>import React from &quot;react&quot;;
  import { Link } from 'react-router-dom';
  
  class UserWelcome extends React.Component {
  
      constructor(props){
          super(props);
          this.state = {
              data: [],
              isLoading: false,
            };
      }
  
      componentDidMount(){
  
          this.setState({ isLoading: true });
  
          const serachByUserId = this.props.location.state;
  
          const proxyurl = &quot;https://cors-anywhere.herokuapp.com/&quot;;
          const url = &quot;my web api&quot; + serachByUserId;
          fetch(proxyurl + url) 
          .then(res =&gt; res.json())
          .then(data =&gt; this.setState({ data: data, isLoading: false }));
  
      };
      
      render() {
          const { data,  isLoading } = this.state;
  
          if (isLoading) {
              return &lt;p&gt;Loading ...&lt;/p&gt;;
            };
  
          if (data.length === 0){
              return &lt;p&gt; no data found&lt;/p&gt;
          }
  
          console.log('data =', data)
  
          return (
            &lt;div&gt;
              &lt;p&gt; UserID = {data.UserId}&lt;/p&gt;
              &lt;p&gt; Welcome back {data.UserName}&lt;/p&gt;
              &lt;p&gt; Below you can find a list of your Orders, link each order to view more details:&lt;/p&gt;
              &lt;ul&gt;
              {data.orders.map(order=&gt;
                &lt;li&gt;&lt;Link to={{ pathname: &quot;/OderDetails&quot;}}&gt;Order number: {order.orderNumber}&lt;/Link&gt;&lt;/li&gt;
              )}
              &lt;/ul&gt;
            &lt;/div&gt;
          );
        }
  }
  
  export default UserWelcome;
  
  
  
  
  import React from 'react';
  
  class OrderDetails extends React.Component {
  
      constructor(props){
          super(props);
          const { data } = props.location
          this.state = {
              isLoading: false,
            };
      }
      
      componentDidMount(){
  
          this.setState({ isLoading: true });
          const proxyurl = &quot;https://cors-anywhere.herokuapp.com/&quot;;
          const url = &quot;my wbi api url&quot; + DATA PASSED INTO THE COMPONANT?;
          fetch(proxyurl + url) 
          .then(res =&gt; res.json())
          .then(data =&gt; this.setState({ data: data, isLoading: false }));
  
      };
      
      render() {
          const { data,  isLoading } = this.state;
  
          if (isLoading) {
              return &lt;p&gt;Loading ...&lt;/p&gt;;
            };
  
          if (data.length === 0){
              return &lt;p&gt; no data found&lt;/p&gt;
          }
      
          return (
            &lt;ul&gt;
              &lt;p&gt; Order Number XXX(from what has been passed in from other componant)&lt;/p&gt;
              &lt;p&gt; then i will use this section to log the data from the web api&lt;/p&gt;
            &lt;/ul&gt;
          );
        }
  }
  
  export default OrderDetails;
  </code></pre>