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

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

But I have a classless child ponent

Child ponent:

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 ponent:

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?

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

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

But I have a classless child ponent

Child ponent:

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 ponent:

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?

• javascript
• reactjs

4 Answers 4

If I understand your question, you can access the id passed to sendId() from the ProjectList ponent 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 ponent 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!

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

https://jsfiddle/bugqsfwj/

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

ponent props.

child ponent:

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

export default project

parent ponent :

import project from './project'

class ProjectList extends React.Component {

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

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

All you have to do is passing a function to child ponent 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 :)