La función que necesita es la que acepta el event y luego establece el estado, pero ha pasado la función que devuelve esa función en lugar de establecer el estado.

Has escrito:

 onChange={textHandler}

Insetad, debe ejecutar esa función para obtener la función de event aceptado.

Solución 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> );

Solución 2 (recomendada, ya que no veo la necesidad de la función de devolución)

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

¡Prueba esto! y descubra su error todavía no puede encontrarlo, luego hágamelo saber. el componente con estilo debe estar fuera de ti `Publica un componente como este

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

Creo que es porque tiene paréntesis adicionales en la función textHandler aquí, no deberían estar.

Tu escribiste:

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

Si bien debe ser:

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