CODEWITHSUNDEEP
reactjstypescriptsharepoint-onlinespfx
NightTom
NightTom

Reputation: 486

Learner question: How to pass data from one class to another

I am learning spfx dev. I am creating a form with several different classes to learn how they can interact and pass data between each other.

I have two separate classes. One Parent class has a submit button which uses the Parents state to submit to a SharePoint list. The other class component has it's own set of states and fields. I want whatever is entered by the user in the child component, to be submittable(!) by the parent class.

Here's my submit function:

private _onSubmit() {
    this.setState({
      FormStatus: 'Submitted',
      SubmittedLblVis: true,

  }, () => {

      pnp.sp.web.lists.getByTitle("JobEvaluationItems").items.add({

        JobTitle: this.state.JobTitle,
        Faculty: this.state.Faculty,
        Department: this.state.SelectedDept,
        SubDepartment: this.state.SubDepartment,
        DeptContactId: this.state.DeptContact,
        FormStatus: this.state.FormStatus,
        EvalType: this.state.EvalType,
        JobTitReportTo: this.state.JobTitReportTo

      }).then((iar: ItemAddResult) => {

        let list = pnp.sp.web.lists.getByTitle("JobEvaluationItems");
        list.items.getById(iar.data.Id).update({
            JobRef: 'JE'+iar.data.Id
        });
        this.setState({
          JobRef: iar.data.Id
        });
      });   
    });   
  }

Here is a function from the child component which handles whatever is typed into a field:

private _onJobTitReportToChange = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
        this.setState({
          JobTitReportTo: newValue
        });
      }

How would I pass the state function above (which is held within the child component) to the Parent component?

Upvotes: 0

Views: 372

Answers (3)

Joseph D.
Joseph D.

Reputation: 12174

How would I pass the state function above (which is held within the child component) to the Parent component?

It's one of React's concepts called lifting state up.

class Parent extends React.Component {
  const someFunction = () => {} // move the function to the parent

  render() {
    return (
      <>
        <ChildComponent someFunction={someFunction} /> // pass function down to child
      </>
    )
  }
}

const ChildComponent = (props) => {
  return <Button onClick={props.someFunction} /> // use parent function
}

Upvotes: 1

Thakur Karthik
Thakur Karthik

Reputation: 3528

if you want to pass data from one component to other.Follow the below steps.

1.PARENT --> CHILD

In parent component's render

render(){
 return (
  <ChildComponent data1={} data2={}/>
 )
}

2.CHILD-->PARENT

make a handler in your submit function which is received to this child component from props

//CHILD COMPONENT
onSubmit=()=>{
   ...
   //some data
   ...
   this.props.onSubmit(data)
 }
//Parent component
render(){
 return(
   ....
   <ChildComponent onSubmit={this.onSubmit}/>
   ....
 )
}

Upvotes: 1

Ivan Burnaev
Ivan Burnaev

Reputation: 2730

class Child extends React.Component {
  state = {
    childValue: 1
  }
  
  onChange = e => {
    this.setState({childValue: e.target.value}, () => {
      this.props.onChange(this.state);
    })
  }
  
  render () {
    return <input value={this.state.childValue} onChange={this.onChange} />
  }
}

class Parent extends React.Component {
  state = {
    parentValue: 123,
    dataFromChild: null
  }
  
  handleChildChange = childData => {
    this.setState({dataFromChild: childData});
  }
  
  render () {
    return (
      <div>
        <Child onChange={this.handleChildChange} />
        
        <pre>{JSON.stringify(this.state, null, 2)}</pre>
      </div>
    )
  }
}

ReactDOM.render(<Parent />, document.querySelector("#root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

In React world are two common used ways to transfer data:

  • If you want to pass it down to the child component - use props;
  • If you want to pass it up to the parent component - use callback;

There is another way - Context, but it's a whole different story.

Upvotes: 2

Related Questions