CODEWITHSUNDEEP
javascriptreactjsrecoiljs
Mohan Stanky
Mohan Stanky

Reputation: 77

There is an error popping up while using React Recoil

I was just trying to learn React Recoil. And encountering the following issue.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Just followed the steps mentioned in this tut https://blog.logrocket.com/simple-state-management-recoil/

Tried whatever mentioned in the below overflow post https://blog.logrocket.com/simple-state-management-recoil/ No luck!

import React from 'react';
import RecoilRoot from 'recoil';
import CharacterCounter from './CharacterCounter';
import './App.css';


function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>

  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  
    <App />
  ,
  document.getElementById('root')
);

import { atom } from 'recoil';

export const textState = atom({
    key: 'textState', // unique ID (with respect to other atoms/selectors)
    default: '', // default value (aka initial value)
});

import { selector } from 'recoil';
import { textState }  from './atom';

export const charCountState = selector({
    key: 'charCountState', // unique ID (with respect to other atoms/selectors)
    get: ({ get }) => {
        const text = get(textState);

        return text.length;
    },
});

import React from 'react';

import TextInput from './TextInput';
import CharacterCount from './CharacterCount';

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

export default CharacterCounter;

import React from 'react';
import { useRecoilState } from 'recoil';
import { textState }  from './atom';

function TextInput() {
    const [text, setText] = useRecoilState(textState);

    const onChange = (event) => {
        setText(event.target.value);
    };

    return (
        <div>
            <input type="text" value={text} onChange={onChange} />
            <br />
        Echo: {text}
        </div>
    );
}

export default TextInput;

import React from 'react';
import { useRecoilValue } from 'recoil';
import { charCountState } from './selector';

export function CharacterCount() {
    const count = useRecoilValue(charCountState);

    return (<div>Character Count: {count}</div>);
}

export default CharacterCount;

Issue: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.
▶ 20 stack frames were collapsed.
Module../src/index.js
D:/Mohan/Projects/2020/Experiments/Recoil/recoil-example/src/index.js:8
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   
     <App />
   ,

Upvotes: 0

Views: 2202

Answers (1)

Johannes Klau&#223;
Johannes Klau&#223;

Reputation: 11020

The RecoilRoot import in App.js should be:

import { RecoilRoot } from 'recoil';

Upvotes: 3

Related Questions