1

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;

15
  • useLazyQuery . Commented Jun 14, 2020 at 10:01
  • After replacing useQuery with useLazyQuery :TypeError: Cannot read property 'searches' of undefined Commented Jun 14, 2020 at 16:14
  • normal in react when data not ready/loaded Commented Jun 14, 2020 at 18:43
  • Its not executing, than is there any way that i put <ReactTable../> in async ClickHandler? this may resolve my hurdle Commented Jun 14, 2020 at 19:04
  • 2
    eh... {data && <ReactTable Commented Jun 16, 2020 at 19:05

1 Answer 1

1

The solution is to replace import ReactTable from 'react-table' with import ReactTable from "react-table-6". For me now its working fine, It may help some one.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.