Fetch url to React component

Question

I got stuck with React fundamentals :/ There is code that generates table with json data inside:

import React from 'react'    
import { DataTable } from 'react-data-components';

function buildTable(data) {
    const tableColumns = [
        { title: 'Author', prop: 'author' },
        { title: 'Country', prop: 'country' },
        { title: 'Title', prop: 'title' },
     ];

    return (
        <DataTable
            className="container"
            keys="id"
            columns={tableColumns}
            initialData={data}
            initialPageLength={5}
         />
    );
}


let url = 'https://api.myjson.com/bins/1sbz3lp';

fetch(url)
    .then(res => res.json())
    .then((rows) => {
        ReactDOM.render(buildTable(rows), document.getElementById('root'));
    });

It gets the job done in index.js but is it possible to render table inside React component?

const Home = () => (
     //renders buildTable(rows)
)

export default Home

Many thanks for all possible help, looking forward.

can you show us the buldTable function that you call in the fetch render? — Rodius
– Rodius, Commented Feb 16, 2018 at 12:31
This looks like something you could do with a class component and internal state, have you tried this? reactjs.org/docs/… — kingdaro
– kingdaro, Commented Feb 16, 2018 at 12:31
@Rodius I have updated my question. Using react-data-components fro table rendering — o.O
– o.O, Commented Feb 16, 2018 at 12:37

Jaye Renzo Montejo · Accepted Answer · 2018-02-16 13:41:51Z

4

Move buildTable() to Home.js then render the Home component in index.js, passing rows as props:

Home.js

import React from 'react'    
import { DataTable } from 'react-data-components'

function buildTable(data) {
  const tableColumns = [
    { title: 'Author', prop: 'author' },
    { title: 'Country', prop: 'country' },
    { title: 'Title', prop: 'title' },
  ]

  return (
    <DataTable
      className="container"
      keys="id"
      columns={tableColumns}
      initialData={data}
      initialPageLength={5}
    />
  )
}

const Home = props => buildTable(props.data)

export default Home

index.js

import ReactDOM from 'react-dom'
import Home from './Home'

let url = 'https://api.myjson.com/bins/1sbz3lp'

fetch(url)
  .then(res => res.json())
  .then(rows => {
    ReactDOM.render(<Home data={rows} />, document.getElementById('root'));
  })

EDIT Stateful Home component

Home.js

import React, { Component } from 'react'
import { DataTable } from 'react-data-components'

const url = 'https://api.myjson.com/bins/1sbz3lp'

class Home extends Component {
  state = {
    data: []
  }

  buildTable = (data) => {
    const tableColumns = [
      { title: 'Author', prop: 'author' },
      { title: 'Country', prop: 'country' },
      { title: 'Title', prop: 'title' },
    ]

    return (
      <DataTable
        className="container"
        keys="id"
        columns={tableColumns}
        initialData={data}
        initialPageLength={5}
      />
    )
  }

  componentDidMount() {
    fetch(url)
      .then(res => res.json())
      .then((rows) => {
        this.setState({ data: rows })
      })
  }

  render() {
    return <div>{this.buildTable(this.state.data)}</div>
  }
} 

export default Home

edited Feb 16, 2018 at 13:41

answered Feb 16, 2018 at 12:48

Jaye Renzo Montejo

1,9022 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

o.O Over a year ago

many thanks for your response. Do you think it is possible to render table without ReactDOM.render because index.js is wrapped in <BrowserRouter> component

Jaye Renzo Montejo Over a year ago

The easiest workaround to your problem is to just render <BrowserRouter /> inside your Home component.

Jaye Renzo Montejo Over a year ago

i.e. const Home = props => <BrowserRouter>{buildTable(props.data)}</BrowserRouter>

o.O Over a year ago

To make it clear I am using this example for routing : codesandbox.io/s/vVoQVk78 . Does your mentioned workaround will work in this case?

Jaye Renzo Montejo Over a year ago

Yep it's pretty much the same. It's your choice whether to put <BrowserRouter /> inside your Home component or wrap <Home /> in the render: ReactDOM.render(<BrowserRouter><Home data={rows} /></BrowserRouter>, document.getElementById('root'))

|

Suresh Ponnukalai · Accepted Answer · 2018-02-16 12:34:40Z

1

You can pass the rows as a props for your Home component and then do whatever you want.

fetch(url)
.then(res => res.json())
.then((rows) => {
    ReactDOM.render(<Home data={rows} />, document.getElementById('root'));
});

Now you can use this.props.data to get the rows information, and do what you are doing inside the buildTable here in the component.

 import React from 'react'

 const Home = () => (
     //this.props.data will give you the rows data and do whatever you want here.
     //renders buildTable(rows)
 )

 export default Home

answered Feb 16, 2018 at 12:34

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

Collectives™ on Stack Overflow

Fetch url to React component

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related