Input returning empty string after submitting

Question

I'm trying to get the values and console.log what that user submitted. My log message after submit returns an empty string. Styled components used so all components are divs except Post (form), Input (input) and Button (button)

  const [enteredText, setEnteredText] = useState("");

  const textHandler = () => event =>{
    setEnteredText(event.target.value);
  };
  const submitHandler = (event) => {
    event.preventDefault();

    const textData = {
      text: enteredText,
    };
    console.log(textData);
  };
  return (
    <Post onSubmit={submitHandler}>
      <TopPost>
        <ProfilePicture></ProfilePicture>
        <Input
          placeholder="What's happening?"
          required
          onChange={textHandler}
        />
      </TopPost>
      <BottomPost>
        <Button type="submit">Post</Button>
      </BottomPost>
    </Post>
  );

Answer 1

I believe it is because you have additional parentheses in the textHandler function here they shouldn't be.

You wrote:

const textHandler = () => event =>{
   setEnteredText(event.target.value);
};

While it should be:

const textHandler = event => {
   setEnteredText(event.target.value);
};

Answer 2

The function you need is that accepts event and then sets state, but You have passed funtcion that returns that function instead of setting state.

You have written:

onChange={textHandler}

Insetad you have to run that function to get event accepted function.

Solution 1:

  const [enteredText, setEnteredText] = useState("");

  const textHandler = () => event =>{
    setEnteredText(event.target.value);
  };
  const submitHandler = (event) => {
    event.preventDefault();

    const textData = {
      text: enteredText,
    };
    console.log(textData);
  };
  return (
    <Post onSubmit={submitHandler}>
      <TopPost>
        <ProfilePicture></ProfilePicture>
        <Input
          placeholder="What's happening?"
          required
          onChange={textHandler()} // Here you have to run this function instead just passing
        />
      </TopPost>
      <BottomPost>
        <Button type="submit">Post</Button>
      </BottomPost>
    </Post>
  );

Solution 2 (Recomended, since I can't see the need of returninng function)

  const [enteredText, setEnteredText] = useState("");

  // Just use event handler funtion, no need to return nested function
  const textHandler = event => {
    setEnteredText(event.target.value);
  };
  const submitHandler = (event) => {
    event.preventDefault();

    const textData = {
      text: enteredText,
    };
    console.log(textData);
  };
  return (
    <Post onSubmit={submitHandler}>
      <TopPost>
        <ProfilePicture></ProfilePicture>
        <Input
          placeholder="What's happening?"
          required
          onChange={textHandler}
        />
      </TopPost>
      <BottomPost>
        <Button type="submit">Post</Button>
      </BottomPost>
    </Post>
  );

Answer 3

Try this! and figure out your mistake still can't find it then let me know. styled-component should be outside you `Post component like this

import React from 'react';
import { useState } from 'react';
import styled from 'styled-components';

const Post = styled.form`
  height: 20vh;
  display: flex;
  justify-content: center;
  background-color: white;
  margin: 0vh 2vw;
  border-radius: 6px;
  flex-direction: column;
`;
const TopPost = styled.div`
  display: flex;
  justify-content: space-evenly;
  height: 50%;
  align-items: center;
`;
const ProfilePicture = styled.div`
  height: 40px;
  border-radius: 100%;
  background-color: red;
  width: 40px;
`;
const Input = styled.input`
  width: 80%;
  border-radius: 6px;
  padding: 2vh 1vw;
  border: transparent;
  background-color: #f0f2f4;
  font-weight: 500;
`;
const BottomPost = styled.div`
  height: 50%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
`;
const Button = styled.button`
  margin-right: 2vw;
  color: white;
  padding: 0.8vw 2.5vw;
  background-color: #377dff;
  border-radius: 6px;
  outline: none;
  border: none;
  cursor: pointer;
`;

export default function CreatePost() {
  const [enteredText, setEnteredText] = useState('');

  // Just use event handler funtion, no need to return nested function
  const textHandler = event => {
    setEnteredText(event.target.value);
  };
  const submitHandler = event => {
    event.preventDefault();

    const textData = {
      text: enteredText,
    };
    console.log(textData);
  };
  return (
    <Post onSubmit={submitHandler}>
      <TopPost>
        <ProfilePicture></ProfilePicture>
        <Input placeholder="What's happening?" required onChange={textHandler} />
      </TopPost>
      <BottomPost>
        <Button type='submit'>Post</Button>
      </BottomPost>
    </Post>
  );
}