title: How to clear input field after a successful Submittion in React, using useEffect function component
body: <p>I am working on a Mern-stack Application, but I'm not able to clear the input field after a successful post Request. I am using a function-based component with useEffect.</p>
  <p>I tried examples I got here on Stack Overflow but it still didn't work. After submitting successfully the input still left in the input field. How do I make this to clear?</p>
  <p>I have tried <code>setCommentData([])</code> after the submit but it didn't work.</p>
  <p>Here is my Component</p>
  <pre><code>export default function EventAndComments(props) {
      const EventComment = (props) =&gt; (
       &lt;CardContent&gt;
         &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot; component=&quot;p&quot;&gt;
           {props.comment.name}
         &lt;/Typography&gt;
         &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot; component=&quot;p&quot;&gt;
          {props.comment.description}
         &lt;/Typography&gt;
      &lt;/CardContent&gt;
    );
  
    const theme = useTheme();
    const [events, setEventData] = useState([]);
    const [comments, setCommentData] = useState([]);
  
    const useStyles = makeStyles((theme) =&gt; ({
      root: {
        maxWidth: 550,
      },
      media: {
        height: 0,
  
        paddingTop: &quot;86%&quot;, // 16:9
        display: &quot;flex&quot;,
        flexDirection: &quot;column&quot;,
        alignItems: &quot;center&quot;,
     },
     expand: {
       transform: &quot;rotate(0deg)&quot;,
       marginLeft: &quot;auto&quot;,
       transition: theme.transitions.create(&quot;transform&quot;, {
        duration: theme.transitions.duration.shortest,
       }),
     },
     expandOpen: {
      transform: &quot;rotate(180deg)&quot;,
     },
     avatar: {
       backgroundColor: red[500],
     },
    }));
  
    const classes = useStyles();
    const [expanded, setExpanded] = React.useState(false);
  
    const handleExpandClick = () =&gt; {
      setExpanded(!expanded);
    };
  
    useEffect(() =&gt; {
      axios
      .get(
        &quot;http://localhost:9000/events/&quot; +
          props.match.params.id +
         &quot;/eventcomments&quot;
       )
  
       .then((response) =&gt; {
         setEventData(response.data);
      })
  
      .catch(function (error) {
        console.log(error);
      });
    }, []);
   const onPageLoad = () =&gt; {
    axios
    .get(
      &quot;http://localhost:9000/events/&quot; +
        props.match.params.id +
        &quot;/eventcomments&quot;
    )
  
    .then((response) =&gt; {
      setCommentData(response.data.eventcomments);
    })
    .catch(function (error) {
      console.log(error);
    });
  };
  useEffect(() =&gt; {
   onPageLoad();
  }, []);
  
  
   const nowIso = new Date();
   const getTitle = (startDateTs, endDateTs) =&gt; {
    const now = Date.parse(nowIso);
  
    if (endDateTs &lt;= now) {
      return &quot;Started:&quot; + &quot; &quot; + moment(startDateTs).format(&quot;LLLL&quot;);
    }
  
    if (startDateTs &lt; now &amp;&amp; endDateTs &gt; now) {
      return &quot;Live:&quot; + &quot; &quot; + moment(startDateTs).format(&quot;LLLL&quot;);
    }
  
      return &quot;Starting:&quot; + &quot; &quot; + moment(startDateTs).format(&quot;LLLL&quot;);
    };
  
    const getEnded = (startDateTs, endDateTs) =&gt; {
     const now = Date.parse(nowIso);
  
    if (endDateTs &lt;= now) {
      return &quot;Ended:&quot; + &quot; &quot; + moment(startDateTs).format(&quot;LLLL&quot;);
    }
  
   if (startDateTs &lt; now &amp;&amp; endDateTs &gt; now) {
     return &quot;Will End:&quot; + &quot; &quot; + moment(startDateTs).format(&quot;LLLL&quot;);
   }
  
    return &quot;Ends:&quot; + &quot; &quot; + moment(startDateTs).format(&quot;LLLL&quot;);
  };
  
  const [eventDescription, setEventComment] = React.useState(&quot;&quot;);
  const [name, setName] = React.useState(&quot;&quot;);
  
  const handleChange = (parameter) =&gt; (event) =&gt; {
    if (parameter === &quot;name&quot;) {
      setName(event.target.value);
    }
    if (parameter === &quot;description&quot;) {
      setEventComment(event.target.value);
    }
  };
  
  const onSubmit = useCallback(
  (e) =&gt; {
    e.preventDefault();
  
    axios
      .post(
        &quot;http://localhost:9000/events/&quot; +
          props.match.params.id +
          &quot;/eventcomment&quot;,
        { name: name, description: eventDescription }
      )
  
      .then(function (response) {
        onPageLoad();
      })
  
      .catch(function (error) {
        console.log(error);
      });
    },
    [props.match.params.id, name, eventDescription]
   );
  
   let eventCommentList = comments.map((comment, k) =&gt; (
     &lt;EventComment comment={comment} key={k} /&gt;
   ));
  
   return (
     &lt;Grid
      container
      spacing={0}
      direction=&quot;column&quot;
      alignItems=&quot;center&quot;
      justify=&quot;center&quot;
      style={{ minHeight: &quot;100vh&quot; }}
     &gt;
     &lt;Card className={classes.root}&gt;
      &lt;h3
        style={{
          background: &quot;   #800000&quot;,
          color: &quot;white&quot;,
          textAlign: &quot;center&quot;,
        }}
        className={classes.cardheader}
      &gt;
        {events.title}
      &lt;/h3&gt;
      &lt;CardHeader
        avatar={
          &lt;Avatar aria-label=&quot;recipe&quot; className={classes.avatar}&gt;
            CB
          &lt;/Avatar&gt;
        }
        action={
          &lt;IconButton aria-label=&quot;settings&quot;&gt;
            &lt;MoreVertIcon /&gt;
          &lt;/IconButton&gt;
        }
        title={getTitle(
          Date.parse(events.startingDate),
          Date.parse(events.closingDate)
        )}
        subheader={getEnded(
          Date.parse(events.startingDate),
          Date.parse(events.closingDate)
        )}
        style={{ background: &quot;#DCDCDC&quot; }}
      /&gt;
      &lt;CardMedia
        className={classes.media}
        image={events.eventImage}
        title=&quot;Paella dish&quot;
      /&gt;
      &lt;CardContent&gt;
        &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot; component=&quot;p&quot;&gt;
          {events.description}
        &lt;/Typography&gt;
      &lt;/CardContent&gt;
    &lt;/Card&gt;
  
    &lt;form
      className={classes.root}
      noValidate
      autoComplete=&quot;off&quot;
      onSubmit={onSubmit}
    &gt;
      &lt;FormControl&gt;
        &lt;InputLabel htmlFor=&quot;component-simple&quot;&gt;Name&lt;/InputLabel&gt;
        &lt;Input
          id=&quot;component-simple&quot;
          value={name}
          onChange={handleChange(&quot;name&quot;)}
          label=&quot;Name&quot;
        /&gt;
      &lt;/FormControl&gt;
  
      &lt;FormControl variant=&quot;outlined&quot;&gt;
        &lt;InputLabel htmlFor=&quot;component-outlined&quot;&gt;Description&lt;/InputLabel&gt;
        &lt;OutlinedInput
          id=&quot;component-outlined&quot;
          value={eventDescription}
          onChange={handleChange(&quot;description&quot;)}
          label=&quot;Description&quot;
        /&gt;
      &lt;/FormControl&gt;
      &lt;Button type=&quot;submit&quot; fullWidth variant=&quot;contained&quot; color=&quot;primary&quot;&gt;
        Create Comment
      &lt;/Button&gt;
    &lt;/form&gt;
    &lt;CardContent&gt;{eventCommentList}&lt;/CardContent&gt;
    &lt;/Grid&gt;
   );
   }
  }
  </code></pre>
  <p>I have added all my codes above.</p>