I am learning react and trying to make the code work, that is using react-table and functional component. The example code fetches list of git-hub repos based on the search keyword entered and displays the list using react-table
There are two issues
compilation fails for below with error that the file cannot be found import 'react-table/react-table.css';
If I comment the line above and run npm start, it fails with the error below
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of App.
import React, { useState } from 'react';
import './App.css';
import ReactTable from "react-table";
import 'react-table/react-table.css';
function App() {
const [data, setData] = useState([]);
const [keyword, setKeyword] = useState('');
const columns = [{
Header: 'Name',
accessor: 'full_name'
}, {
Header: 'URL',
accessor: 'html_url'
}, {
Header: 'Owner',
accessor: 'owner.login'
}]
const fetchData = () => {
console.log(keyword);
const url = `https://api.github.com/search/repositories?q=${keyword}`;
fetch(url)
.then(response => response.json())
.then(responseData => {
setData(responseData.items);
})
}
const handleChange = (e) => {
setKeyword(e.target.value);
}
return (
<div className="App">
<input type="text" onChange={handleChange} />
<button onClick={fetchData} value={keyword} > fetch</button>
<ReactTable data={data} columns={columns} />
</div>
);
}
export default App;
