CODEWITHSUNDEEP
javascriptreactjstypescriptnext.js
José Carlos
José Carlos

Reputation: 774

React text input inside modal not working

i have this custom modal that render a children element

function MyModal({
  children,
  setShow,
}: {
  children: JSX.Element;
  setShow: (data: boolean) => void;
}) {
  return (
    <div
      className="absolute top-0 w-full h-screen flex flex-col justify-center backdrop-blur-md"
      onClick={() => setShow(false)}
    >
      {children}
    </div>
  );
}

export default MyModal;

I wanna render different elements inside of it, so i created this state

 const [element, setElement] = useState<JSX.Element | null>(null);

I'm calling the modal as

{show && <MyModal children={element} setShow={setShow} />}

I'm setting the children as this

<button
          onClick={() => {
            setElement(AddNewTask);
            setShow(true);
          }}
        >
          Add
        </button>

And it's working ok, it opens and closes fine, but the text input of the rendered element is not working, nothing types. This is the AddNewTask component that i'm rendering

const AddNewTask = (): JSX.Element => {
  return (
    <div
      className="bg-green-400 p-20 rounded-md"
      onClick={(e) => e.stopPropagation()}
    >
      <form
        onSubmit={(e) => {
          e.preventDefault();
          addTask();
        }}
      >
        <input
          value={content}
          onChange={(e) => setContent(e.currentTarget.value)}
          placeholder="Tarefa"
        />
      </form>
      <button onClick={addTask}>Adicionar</button>
      <button onClick={() => setShow(false)}>Cancelar</button>
    </div>
  );
};

Upvotes: 0

Views: 1916

Answers (1)

Chris Hahn
Chris Hahn

Reputation: 36

The setContent method in the AddTask Component is undefined/ only defined through scope. You need to pass it as a prop to the AddTask component to work or alternatively create the state inside the component with a useState hook.

Upvotes: 1

Related Questions