CODEWITHSUNDEEP
reactjstypescript
pingeyeg
pingeyeg

Reputation: 680

Confused on how to write .map method with TypeScript

I'm trying to understand how to add TypeScript to my .map method, but at the moment, I'm getting the following error message. I'm not really sure what the 'never' keyword signifies either.

TS2339: Property 'fname' does not exist on type 'never'

The code I'm using is:

const [climbs, setClimbs] = useState([]);
...
useEffect(() => {
  async function data() {
    try {
      const getClimbs = await axios.get("http://localhost:4000/climbs");
      setClimbs(getClimbs.data);
    } catch (err) {}
  }
  data();
}, []);
...
<div className="list">
  {climbs.map(climb => {
    return (
      <>
        <div className="list-name">{climb.fname}</div>
        <div className="list-recent-climb">
          {climb.climb} - {climb.grade} - {climb.location}
        </div>
        <div className="list-date">{climb.date}</div>
      </>
    );
  })}
</div>
...

I also tried adding a type object at the top to see if that would clear things up. I'm new to TypeScript so trying to get my bearings.

type Props = {
  fname: String,
  climb: String,
  grade: String,
  location: String,
  date: Date
}

Upvotes: 0

Views: 57

Answers (1)

chautelly
chautelly

Reputation: 467

It is because you are calling useState with an empty array which defaults to type never[]. Change it to:

React.useState<Props[]>([])

Upvotes: 1

Related Questions