CODEWITHSUNDEEP
javascriptreactjs
David Johns
David Johns

Reputation: 1714

How to send data from stateless child component to stateless parent component in react?

I am new to react. I have a react App with several class components and classless components. I have following two components and need to send a data ("projectID" in this case) from the child component to parent component. My child component is a classless component. I know that I can do this in class components as follows

sendId(id) {
  this.setState({ projectID:id }, () =>
     this.props.onClick(this.state.projectID)
  )
}

But I have a classless child component

Child component:

const sendId = (id) => {
  // How to setup "send id to parent" here?
}

const project = ({ task }) => (
  <div onClick={() => sendId(task.projectID)} >
    {task.projectID}
  </div>
)

export default project

Parent component:

import project from './project'

class ProjectList extends React.Component {

  render() {
    return (
      <div>
        {() => (
          <project 
              // How to setup "get id from child" here? 
          />
        )}
      </div>
    ));
  }
}

How can I do this?

Upvotes: 3

Views: 3102

Answers (4)

ChunLin Wu
ChunLin Wu

Reputation: 11

All you have to do is passing a function to child component that accept ID.

Parent Component

class ProjectList extends React.Component {
  getChildData = (id) => {/* do something */ }

  render() {
    return (
      <div><Project getDataFn={this.getChildData}</div>
    ));
  }
}

Child Component

const project = ({ task }) => (
  <div onClick={this.props.getDataFn(task.projectID)} >
    {task.projectID}
  </div>
)

Happy React :)

Upvotes: 1

jmounim
jmounim

Reputation: 1051

You can pass a callback that you define in your parent component to your child

component props.

child component:

const project = ({ task, sendId }) => (
  <div onClick={() => sendId(task.projectID)} >
    {task.projectID}
  </div>
)

export default project

parent component :

import project from './project'

class ProjectList extends React.Component {

  sendIdHandler = (projectId) => {
    //put your logic here
  }

  render() {
    return (
      <div>
          <project sendId={this.sendIdHandler} />
      </div>
    ));
  }
}

Upvotes: 2

Ibra
Ibra

Reputation: 1046

Just give parent's method to child component, and use props.xxx().

https://jsfiddle.net/bugqsfwj/

Upvotes: 2

Dacre Denny
Dacre Denny

Reputation: 30360

If I understand your question, you can access the id passed to sendId() from the ProjectList component by passing a callback prop to <project> in the ProjectList render method like so:

class ProjectList extends React.Component {

  render() {
    return (
      <div>
          {/* pass onSendId callback prop, and console log when it's invoked */}
          <project onSendId={ (theId) => { console.log(`sent id: ${theId}`); } } />
      </div>
    ));
  }
}

This change would then require your to update the project component so that the callback prop is invoked when the onClick handler is invoked:

const project = ({ task, onSendId }) => (
  {/* Pass the onSendId callback into project, and call this from onClick */}
  <div onClick={() => onSendId(task.projectID)} >
    {task.projectID}
  </div>
)

Hope that helps!

Upvotes: 5

Related Questions