Typerror: object is not a function or its return value is not iterable in react 16.13.1

Question

I am using react version 16.13.1. And i have used hooks alot of time in my project.but now am getting this error even before i use it.

export default function TourData(props) {
  const [collapsed, setCollapsed] = useState();
  const withinDatacollapse = props.tourWithin.slice(1);
  const withinDatashow = props.tourWithin.slice(0, 1);

  function handleViewAll() {
    setCollapsed(!collapsed);
  }

  function Object(props) {
    return (
      <div>
        {props.data &&
          props.data.map((item, index) => (
            <div key={index} className="within">
              <div
                className="image"
                style={{ background: `url(${item.image})` }}
              >
                <div className="destination">{item.country}</div>
              </div>
              <div className="options">
                <div>
                  <h5>Options</h5>
                  <div className="user-select">
                    <Select
                      options={item.options}
                      placeholder={<h4>Select Option</h4>}
                    />
                  </div>
                </div>
              </div>
              <div className="date-select">
                <div className="user-select">
                  <Select
                    options={item.date_options}
                    placeholder={<h4>Select Date</h4>}
                  />
                </div>
              </div>
              <div>
                <button>Go!</button>
              </div>
            </div>
          ))}
      </div>
    );
  }
  return (
    <div className="route">
      <div className="list-box">
        <Object data={withinDatashow} />
        <Collapse in={collapsed}>
          <Object data={withinDatacollapse} />
        </Collapse>
        <div className="bottom-view-section">
          <button onClick={handleViewAll}>View All</button>
        </div>
      </div>
    </div>
  );
}

Here i just declared the hook, and am getting this error. I cant find where i have went wrong.

At first i had an error TypeError: Cannot read property 'map' of undefined where i do mapping, so i had to put props.data && just before the mapping.

Answer 1

You shouldn't name your components as Javascript's keywords like Object or class.

Also, you might want to define default value for props.placeData so when it is undefined, you don't get errors.

export default function AppMain({placeData = [], ...props}) {

Or you can just check in return, and say something like 'there is no place'. It's up to you.