javascript - Element type is invalid: expected a string in react component

Question

Full error message:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

usually this is something to do with components not being imported or exported correctly but everything looks fine to me. Any ideas what the issue could be.

import React, { useRef, useState, useEffect } from 'react';
import Form from 'react-bootstrap/Form';
import ScrollToTop from './ScollToTop';

const StoreDirectory = (props) => {

  const [filteredValues, setValues] = useState(props.storesData);
  const [initialValues, setInitialValues] = useState(props.storesData);
  const [storeCategorys, setStoreCategories] = useState(props.storesCategorysData);

  const alphabet = "abcdefghijklmnopqrstuvwxyz";
  const alphabetIntoArray = alphabet.split("");

  const itemsRef = useRef([]);

  useEffect(() => {
    itemsRef.current = itemsRef.current.slice(0, alphabetIntoArray.length);
  }, [alphabetIntoArray])

  const AlphaButtons = () => {

    const goToSelection = (event, index) => {
      if(itemsRef.current[index]) {
        itemsRef.current[index].scrollIntoView({
          behaviour: "smooth",
          block: "nearest"
        })
      }
    }

    return (
      <>
        {alphabet.split("").map((item, index) => (
          <button key={index} onClick={(e) => goToSelection(e, index)}>{item}</button>
        ))}      
      </>
    )
  }

  const DropDown = () => {
    const handleOnchange = (event) => {
      const filter = event.target.id;
      const initialState = [...initialValues]
      setValues(initialState.filter(store => 
        {return (store.store-category.indexOf(filter) >= 0)}
      ));
    }

    const defaultSelectMessage = 'select a category';

    return (
      <Form>
        <Form.Group controlId="exampleForm.SelectCustom">
          <Form.Label>Custom select</Form.Label>
          <Form.Control defaultValue={defaultSelectMessage} onChange={(e) => handleOnchange(e)} as="select" custom>
            <option hidden disabled value={defaultSelectMessage}>{defaultSelectMessage}</option>
            {storeCategorys.map((item, index) => (
              <option id={item.id} key={index}>{item.name}</option>
            ))}
          </Form.Control>
        </Form.Group>
      </Form>
    );
  }

  const Filter = () => {
    return (
      <div>
        {alphabet.split("").map((c, i) => {
          return (
            <>
            {filteredValues
              .filter(store => store.title.rendered.startsWith(c)).length === 0 
              ? <h1 ref={ el => itemsRef.current[i] = el } className={'Grey'}>{c}</h1>
              : <h1 ref={ el => itemsRef.current[i] = el } className={'notGrey'}>{c}</h1>   
            }
              
            {filteredValues
              .filter(store => store.title.rendered.startsWith(c))
              .map((item, index) => (   
                <li key={index}>{item.title.rendered}</li>
              ))}
              
            </>
          );
        })}
      </div>
    );
  }

  return (
    <>
      <DropDown />
      <AlphaButtons />
      <Filter />
      <ScrollToTop />
    </>
  )
  
}

export default StoreDirectory;

question from:https://stackoverflow.com/questions/65923526/element-type-is-invalid-expected-a-string-in-react-component

Answer 1

Waitting for answers