0

So I've got both chunks of code written for both the API request, as well as the grid rendering, however I'm confused as to how to combine the two in a react environment. Any suggestions?

(this is using react-axios) 

<Request
      method="get", /* get, delete, head, post, put and patch - required */
      url="http://coincap.io/front", /*  url endpoint to be requested - required */
      debounce={50} /* minimum time between requests events - optional */
      onSuccess={(response)=>{}} /* called on success of axios request - optional */
      onError=(error)=>{} /* called on error of axios request - optional */
    />

I'm looking to remove this hardcoded data, and render the grid with the data pulled from the api call to CoinCap.io

// Grid data as an array of arrays
const list = [
  ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125 /* ... */ ]
  // And so on...
];

function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
    <div
      key={key}
      style={style}
    >
      {list[rowIndex][columnIndex]}
    </div>
  )  
}

ReactDOM.render(
  <Grid
    cellRenderer={cellRenderer}
    columnCount={list[0].length}
    columnWidth={150}
    height={300}
    rowCount={list.length}
    rowHeight={60}
    width={700}
  />,
  document.getElementById('root')
);
Sean Magin
  • 11
  • 5

1 Answers1

1

You can insert the results of your API call into the component's state. Inside your Request component, try this: onSuccess={(response)=> this.setState({ list: response });. You might also consider making the API call inside a component lifecycle method like componentWillMount instead of the Axios component.

Then in your render method, replace your reference to the local placeholder list with this.state.list. Obviously you'll need to tweak this to make it work within your component structure, but without seeing the complete component this should at least get you moving in the right direction.

Donny West
  • 710
  • 3
  • 6
  • awesome thank you Donny. I've seen lifecycle methods around, but haven't learned much about them so I'll look further into that, I appreciate the heads up. – Sean Magin Jun 21 '17 at 03:16
  • Donny, what would making an API call inside the lifecycle method look like anyway? – Sean Magin Jun 23 '17 at 00:02