title: How to add value to a button dynamically in react-table
body: <p>I have a react table (using react-table) component which looks as below. In the column State, I want to render button in each cell with dynamic values. These values I want to fetch from server data. </p>
  
  <p><a href="https://i.stack.imgur.com/flr6K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/flr6K.png" alt="enter image description here"></a></p>
  
  <pre><code>{
      //Header: 'Download',
      id: 'request_state',
      filterable: false,
      Cell: ({index}) =&gt;
      (&lt;Button id={"approve_" + index}
              value={&lt;FormattedMessage id={"Approve_" + index} defaultMessage={"Approved"}
              fontSize={14}
              minHeight={33}
              minWidth={"100%"}
              backgroundColor="transparent"
              borderRadius={5}
              icon={&lt;Download size={13} color={'black'}&gt;&lt;/Download&gt;}
              onClick={() =&gt; this.handleDownloadDelivery(index)}
      /&gt;)
  }
  </code></pre>
  
  <p>Using above code, I could populate button in each cell with value "Approved". However, I want to populate this value dynamically using attribute values that I am getting in request_state attribute of the object "data" from server. Using "accessor:" I could access these attribute values of server side data, but I am not able to do the same for 'Cell:'. I could see string "invited" using accessor:</p>
  
  <pre><code>{
      Header: 'State',
      id: 'request_state',
      filterable: false,
      accessor: data =&gt;{
                let output =[];
                output = data.request_state;
                return output;
             },
  }
  </code></pre>
  
  <p>I basically want something like below:</p>
  
  <pre><code>{
      //Header: 'Download',
      id: 'request_state',
      filterable: false,
      Cell: ({index}) =&gt;
      (&lt;Button id={"approve_" + index}
          value={&lt;FormattedMessage id={"Approve_" + index} defaultMessage={data.request_state}}
          fontSize={14}
          minHeight={33}
          minWidth={"100%"}
          backgroundColor="transparent"
          borderRadius={5}
          icon={&lt;Download size={13} color={'black'}&gt;&lt;/Download&gt;}
          onClick={() =&gt; this.handleDownloadDelivery(index)}
      /&gt;)
  }
  </code></pre>