Except 'ReactTable...', code is running perfectly, when i add ReactTable screen become blank white and popup below error on console
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Here is the code. {data.searches} contains the query data. When i use {JSON.stringify(data.searches)} it returns string but when i use {data.searches} or {[data.searches]} in ReactTable it shows above error.
MobileInfo.js
import React, {useState} from 'react'
import ReactTable from 'react-table'
//import 'react-table/react-table.css'
import gql from "graphql-tag"
import {Query} from 'react-apollo'
import {useQuery} from 'react-apollo'
import Error from './Forms/Errors'
import Loading from './Forms/Loading'
const LIST_INFO= gql`
query searches ($search:String!)
{
searches(search:$search)
{
name
Launch
Display
Color
Memory
}
}
`
const Search=()=>{
const clickHandler= async ()=>{
setSearch(sSearch);
console.log(data.searches);
content=data.searches;
};
const [search, setSearch]= useState('')
const {data, loading, error}=useQuery(LIST_INFO, {
variables: { search }
});
let sSearch;
let content;
if (loading) return <Loading/>;
if (error) return <Error error={error}/>;
const mobile = data.searches;
// content = ` info: ${mobile.name} Launch: ${mobile.Launch}`
const columns = [
{
Header: "LAUNCH",
accessor: "Launch"
},
{
Header: "NAME",
accessor: "name"
},
{
Header: "DISPLAY",
accessor: "Display"
},
{
Header: "COLOR",
accessor: "Color"
},
{
Header: "MEMORY",
accessor: "Memory"
}
]
return (
<div>
<input type="text" onChange={ (e) => {sSearch=e.target.value}}/>
<button onClick={clickHandler} value={search} >
Search
</button>
<div><p>{JSON.stringify(data.searches)}</p></div>
<ReactTable data={data.searches} columns={ columns } />
</div>
)
};
export default Search;
useLazyQuery.{data && <ReactTable