I'm receiving 'JSX element type does not have any construct or call signatures' error

Issue

I'm building a application that gets an input from the user using buttons and create a array but when i try to display the array, it gets an error of JSX element type.

import { Delete } from "lucide-react"

export function PasswordButtons(){

const test = document.getElementById('passButon') as HTMLButtonElement;

let CharactersAdded:HTMLButtonElement[] = [test]

    const addUserPassword = (e : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        CharactersAdded.push(test)
    }

    const eraseCharacter = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        CharactersAdded.pop();
    }

The user is supposed to click on these buttons and form a password

return <div> 
<button className="passButton" onClick={addUserPassword}> ❤️ </button>
<button className="passButton" onClick={addUserPassword}> 💛 </button>
<button className="passButton" onClick={addUserPassword}> 💚 </button>
<button className="passButton" onClick={addUserPassword}> 💙 </button>
<button className="passButton" onClick={addUserPassword}> 💜 </button>
<button className="passButton" onClick={addUserPassword}> 🖤 </button>
<button className="passButton" onClick={addUserPassword}> 🤍 </button>
<button className="passButton" onClick={addUserPassword}> 🤎 </button>
<button className="passButton" onClick={addUserPassword}> 🧡 </button>
<button onClick={eraseCharacter}>
<Delete className="DeleteButton"/>
</button>
<br />

I've tried to display the array here

<p>
    <CharactersAdded />
</p>

</div>
}

Solution

The exact error you are getting regarding call signature is because CharactersAdded is an array, but you are treating it like a component.

Under the hood, React will be attempting to do React.createElement([]). Normally, say for <div /> React would do React.createElement('div').

I think you are trying to push a character into an array, and then print that array to screen. To do that, you could do:

const charactersAdded = ['a', 'b', 'c'];


return <div>{charactersAdded.join('')}</div>

However, doing that won't fix the rest of the issues in your script:

• getElementById('passButon') but you don't have any elements with that id, only elements with class name
• you shouldn't really be referencing elements like that in react (except for extreme cases)
• You are pushing the same test value (CharactersAdded.push(test)) instead of basing it on the clicked button

I think overall, you are looking for a solution like:

const PasswordButtons = (props) => {
  const { password, setPassword } = props;

  return (
    <div>
      <button onClick={() => setPassword((s) => [...s, "❤️"])}> ❤️ </button>
      <button onClick={() => setPassword((s) => [...s, "💛"])}> 💛 </button>
      <button onClick={() => setPassword((s) => [...s, "💚"])}> 💚 </button>
      <button onClick={() => setPassword((s) => [...s, "💙"])}> 💙 </button>
      <button onClick={() => setPassword((s) => [...s, "💜"])}> 💜 </button>
      <button onClick={() => setPassword((s) => [...s, "🖤"])}> 🖤 </button>
      <button onClick={() => setPassword((s) => [...s, "🤍"])}> 🤍 </button>
      <button onClick={() => setPassword((s) => [...s, "🤎"])}> 🤎 </button>
      <button onClick={() => setPassword((s) => [...s, "🧡"])}> 🧡 </button>
      <button onClick={() => setPassword((s) => s.slice(0, -1))}>
        delete
      </button>
    </div>
  );
};

const App = () => {
  const [password, setPassword] = useState([]);

  return (
    <div>
      <PasswordButtons password={password} setPassword={setPassword} />
      <pre>{password.join("")}</pre>
    </div>
  );
};

https://codepen.io/chrisk7777/pen/NWJwdzq?editors=0010

Note: There are probably cleaner ways to avoid the repetition, but the example is to show the OP a solution extended from their current code.

Answered By - Chris