Sometimes we need to pass data from a child component to parent component. For example we can have an input child component and a parent that shows the input when input is updated. Let’s make an example of it.

Create a react app with create-react-app and create an Input.js file:


import React from 'react';
import styled from 'styled-components'

const Input = ({
}) => {

    return (
const StyledInput = styled.input`
border:2px solid black;
margin:5% 0 0 20%;
export default Input

The child component takes a function prop, and this function actually updates the state of the parent component. Jump into App.js and modify it like this:


import React, { useState } from 'react';
import Input from './Input';
import styled from 'styled-components';

const App = () => {
  const [text, setText] = useState("");
  const changeState = (e) => {
    const value =;
  return (
const StyledText = styled.div`
margin:0 0 0 20%;

export default App

As you can see, we have a text state and a changeState function. We pass changeState function to the Input component, that way the child component is able to pass data to the parent component.

The output looks like this:

When input is “Hello”:

When input is “Hello World !”:


Basically, we pass an event handler function to our child component, that modifies the parent component’s state.

That’s it for this article, I hope you enjoyed and learned a lot.

Avatar photo
👋 Hey, I'm Osman Armut
Hi, I'm Osman Armut. I'm a self taught frontend developer that has a great passion for Javascript and React ecosystem. I use articles in my personal learning journey and I like to share my knowledge to help people.

💬 Leave a comment

Your email address will not be published. Required fields are marked *

We will never share your email with anyone else.