CODEWITHSUNDEEP
javascriptreactjs
Tom Hanks
Tom Hanks

Reputation: 614

Passing function value from parent to child

I'm building a check builder, I have multiple Parent components (forms) that display their inputs on a Child component (check layout).

This is my parent component:

import React from 'react';
import './../App.css';
import Check from './Check';

class BusinessAddress extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: {
      name: 'BusinessAddress',
      a: '',
      b: '',
      c: '',
      d:  '',
      e: '',
      f: '',
      g: '',
      h: ''
    }};

  }

  handleComponentName = name => {
    //console.log('handleComName', name)
    return this.state.name === name;
  }

  handleChange(property, event) {
    console.log(event.target.value);
    const text = {...this.state.text};
    text[property] = event.target.value;
    this.setState({text: text});
  }

  handleSubmit(event) {
    console.log(this.state.text.e);
  }

  render() {

    return (
      <div>
      <div className="form-box">
        <h3>Business Address</h3>
        <label>Business Name</label>
        <input type="text" placeholder="Business Name" value={this.state.text.a} onChange={this.handleChange.bind(this, 'a')} maxLength="30" />
        <label>Name Line 2</label>
        <input type="text" placeholder="Business Name Line 2" value={this.state.text.b} onChange={this.handleChange.bind(this, 'b')} maxLength="90" />
        <label>Street Address</label>
        <input type="text" placeholder="Street Address" value={this.state.text.c} onChange={this.handleChange.bind(this, 'c')} maxLength="30" />
        <label>Address Line 2</label>
        <input type="text" placeholder="Street Address Line 2" value={this.state.text.d} onChange={this.handleChange.bind(this, 'd')} maxLength="30" />
        <label>City</label>
        <input type="text" className="short" placeholder="City" value={this.state.text.e} onChange={this.handleChange.bind(this, 'e')} maxLength="30" />
        <label>State</label>
        <input type="text" className="short" placeholder="State" value={this.state.text.f} onChange={this.handleChange.bind(this, 'f')} maxLength="30" />
        <label>Postal</label>
        <input type="text" className="short" placeholder="Postal" value={this.state.text.g} onChange={this.handleChange.bind(this, 'g')} maxLength="30" />
        <label>Phone (optional)</label>
        <input type="text" className="short" placeholder="Phone" value={this.state.text.h} onChange={this.handleChange.bind(this, 'h')} maxLength="30" />
        </div>

      <Check data={this.state.text} handleParent={this.handleComponentName}/>

      </div>
    )
  }

}

export default BusinessAddress;

This is my child component:

import React from 'react';
import './../App.css';

export class Check extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {

    const data = Object.values(this.props.data);

    if(this.props.handleParent('BusinessAddress')) {

    }


    return (
      <div>

        { data.map((item, index) => <li key={index}>{item}</li>) }

        <div id="Address"></div>
        <div id="Bank-Info"></div>

      </div>
    )
  }
}



export default Check;

I'm trying to map the data to a specific div based on which parent the data is coming from. Right now all that I'm getting from the child is the returned function, but no return value?

Thanks in advance!

Upvotes: 0

Views: 50

Answers (2)

Monzoor Tamal
Monzoor Tamal

Reputation: 810

<input type="text" placeholder="Business Name" value={this.state.text.a} onChange={this.handleChange.bind(this, 'a')} maxLength="30" />

Change this to this

<input type="text" placeholder="Business Name" value={this.state.text.a} onChange={(e) => this.handleChange(e, 'a')} maxLength="30" />

also change this

handleComponentName = name => {
//console.log('handleComName', name)
return this.state.name === name; }

to 

this.state.text.name === name;

here is the demo

Upvotes: 1

Tridibesh Nag
Tridibesh Nag

Reputation: 52

Try binding the onchange like

onChange={(event) => this.handleChange('h', event)}

Upvotes: 0

Related Questions