Typescript error 2345 when pushing element to array of elements React js

0 votes

I'm pretty new to Typescript and I was trying to migrate a component I had on Reactjs to typescript. This component is supposed to receive a number from 0-10 as a prop and according to that number populate an array with stars components which are icons I imported from React icons. once the array is populated is then rendered by the component. but when I try to push those elements to the Array typescript throws an error as if those elements were not of type Element neither Jsx. The only way I found it to work was by setting

let starsArray: Element[] | any = [];

but my idea was not to leave anything as "any" type;

import React, { useState, useEffect } from "react";
import { BsStarFill } from "react-icons/bs";

interface PropsInterface {
  stars: number;
  big?: boolean;
}

const Stars: React.FC<PropsInterface> = ({ stars, big }) => {
  const [array, setArray] = useState<Element[]>([]);

  useEffect(() => {
    let starsArray: Element[] = [];
    let starsAmount: number = Math.round(stars) / 2; //gets rating from props and turns it into integer divided by two (ratings were 1-10 and we needed 1-5 stars);

    for (let i = 0; i < 5; i++) {
      //goes throught 1-5 and if the rating amount is higher or equal on each iteration it pushes a filled star component to  starsArray, else it pushes an empty star
      if (starsAmount > i) {
        starsArray.push(<BsStarFill className="star--filled" key={i} />);
      } else {
        starsArray.push(<BsStarFill className="star--unfilled" key={i} />);
      }
    }

    setArray(starsArray);
  }, []);

  return (
    <div className={big ? "stars --bigstars" : "stars"}>
      {Object.values(array).map((each) => each)}
    </div>
  );
};

export default Stars;



these where the lines showing the error with a red underline

(<BsStarFill className="star--unfilled" key={i} />)
(<BsStarFill className="star--filled" key={i} />)

these is the complete error :

Argument of type 'JSX.Element' is not assignable to parameter of type 'Element'. Type 'ReactElement<any, any>' is missing the following properties from type 'Element': attributes, classList, className, clientHeight, and 123 more.ts(2345)

I would really appreciate some help here, thank you !

Jul 5 in TypeSript by Nina
• 3,020 points
43 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In TypeSript

0 votes
1 answer

What is "not assignable to parameter of type never" error in TypeScript?

All you have to do is define ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
932 views
0 votes
1 answer
0 votes
1 answer

How to use moment.js library in angular 2 typescript app?

REFERENCE: https://momentjs.com/docs/#/use-it/typescript/ You can install this by using: npm install ...READ MORE

answered Jun 1 in TypeSript by Nina
• 3,020 points
63 views
0 votes
1 answer
0 votes
1 answer
0 votes
1 answer

How to use useState hook in React with TypeScript correctly?

Without any initial argument, the type of email and setEmail will ...READ MORE

answered Jun 10 in TypeSript by Nina
• 3,020 points
47 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24 in Others by narikkadan
• 11,280 points
474 views
0 votes
1 answer

React Native Performance: Javascript vs Typescript

TypeScript is just compiled to JavaScript. Think ...READ MORE

answered Jun 13 in TypeSript by Nina
• 3,020 points
19 views
0 votes
0 answers
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP