Calling two useState setters in react causes error. Why?

Question

I've got this functional component:

export const Special = (props) => {
    const [data, setData] = useState();
    const [loading, setLoading] = useState(true);

    const dataRead = (dt) => {
        setData(dt);
        setLoading(false);
    }

    useEffect(() => {
        setLoading(true);
        fetch("/reportTypes/search/visible")
            .then( (response) => response.json() )
            .then( dataRead)            
            .catch( (err) => {
                setLoading(false);
            });
    }, []);

    if ( loading ) return (<Loading />);

    return (        
        <div className="Special">
            <Labeled label="Pricing">
                {JSON.stringify(data)} 
            </Labeled>
        </div>
    );
}

If I remove one of setData(dt) or setLoading(false) from dataRead method it works. However if both are present, I get an error:

Uncaught 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.

I tried calling this without useEffect - same result. I tried useEffect with square brackets as above, and without. I tried various configurations. No matter how, but calling both setData and setLoading causes this error. Removing one of them makes it OK. I'm fresh to react so there must be something I missing.

When asking questions it's important to be clear about what line is actually causing the error. There are three places this could occur based on your problem description: either `` is undefined, `` is undefined, or you're attempting to render `data` while it's still undefined, with the caveat the error could occur in *multiple* places depending on current code and conditions. — Dave Newton, May 15 '21 at 15:59

score 0 · Answer 1 · answered May 15 '21 at 15:58

You have not specified the default state value for setData use state. const [data, setData] = useState();.

You need to specify the default state value while using useState hook, just like when we use.

Try changing your setData line with the below code. Here, we have specified the default state value as an empty object.

const [data, setData] = useState({});

score 0 · Answer 2 · answered May 15 '21 at 16:24

I think where ever you are using this Special component, you are importing it as a simple import e.g., import Special from 'module' but you are not exporting it as a default export i.e., you mixed up the default and named imports and thats the reason you are getting a very clear error message here:

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Try to replace either your named export with default export like below:

import React from 'react';
import {useState, useEffect} from 'react';

const App = (props) => {
  const [data, setData] = useState();
  const [loading, setLoading] = useState(true);

  const dataRead = (dt) => {
      setData(dt);
      setLoading(false);
  }

  useEffect(() => {
      setLoading(true);
      fetch("/reportTypes/search/visible")
          .then( (response) => response.json() )
          .then( dataRead)            
          .catch( (err) => {
              setLoading(false);
          });
  }, []);

  if ( loading ) return (<div>Ankita</div>);

  return (        
      <div className="Special">
          <div label="Pricing">
              <div>Suman</div>
              {JSON.stringify(data)} 
          </div>
      </div>
  );
}

export default App;

Or either you can import like we import from Named module. Named modules can be imported using import { exportName } from 'module';

For more understanding of Default exports and Named exports, please read this answer.

Calling two useState setters in react causes error. Why?

2 Answers2