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>
  );

Malkhazi Dartsmelidze · Accepted Answer · 2022-04-11 11:32:00Z

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>
  );

answered Apr 11, 2022 at 11:32

Malkhazi Dartsmelidze

4,9924 gold badges20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Lorenzo Durante Over a year ago

When I try = event => my page automatically refreshes every time I type. I also tried adding event.preventDefault() but it's not working

Malkhazi Dartsmelidze Over a year ago

It shouldn't. Show us full code, may be there's another problem

Malkhazi Dartsmelidze Over a year ago

That link is just empty codesandbox link

Lorenzo Durante Over a year ago

codesandbox.io/s/amazing-voice-j2tbuh?file=/src/App.js Didn't save, sorry

Malkhazi Dartsmelidze Over a year ago

You have styled components inside function. When state changes function re-runs and refreshes all components, that's why input is loosing focus, becaus it has got new ref. Just place styled components outside function. codesandbox.io/s/wispy-field-6i7nz3?file=/src/App.js

|

tomleb · Accepted Answer · 2022-04-11 11:33:35Z

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);
};

answered Apr 11, 2022 at 11:33

tomleb

2,5232 gold badges12 silver badges25 bronze badges

7 Comments

tomleb Over a year ago

I'm not sure what you're problem actually is. Not to mention you have custom component there for the input / form / etc.. So there is no way for me to be sure. But here is a simple example that works.

Lorenzo Durante Over a year ago

If i change the extra parenthesis my page reloads after every keyboard press. I tried adding event.preventDefault() but it's not working

Lorenzo Durante Over a year ago

I should've added but I'm using styled components so all "custom" components are just divs with styling (except Post that is a form and Input which is an input)

tomleb Over a year ago

If you can provide an exact example in codesandbox I could actually check and might be able to help, but as mentioned, if this works, then I don't see a reason for your code not to work.

Lorenzo Durante Over a year ago

I was kinda procrastinating solving that warning because i thought it wouldn't change the functionality part. Thank you!

|

Abbas Hussain · Accepted Answer · 2022-04-11 12:03:59Z

1

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>
  );
}

edited Apr 11, 2022 at 12:03

answered Apr 11, 2022 at 11:27

Abbas Hussain

1,3959 silver badges17 bronze badges

7 Comments

Lorenzo Durante Over a year ago

When i change = event => my page reloads on every type. I tried adding event.preventDefault() but it's not working.

Abbas Hussain Over a year ago

Can you show what inside Post component and Input component

Lorenzo Durante Over a year ago

It's just styled components. It's a form and input with styling

Abbas Hussain Over a year ago

nope there is something that triggering page reload

Abbas Hussain Over a year ago

styled-component should be outside fixed your issue check out

|

Collectives™ on Stack Overflow

Input returning empty string after submitting

3 Answers 3

Solution 1:

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

7 Comments

7 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Solution 1:

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

7 Comments

7 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related