Passing props from different Parent components

Question

I have multiple parent components, all forms, it's a check builder. You enter your information and they print you checks. The child component is the check layout, where all of the data is place from the forms.

This is my first parent component - BusinessAddress

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: ''
    }};

  }

  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} />

      </div>
    )
  }

}

export default BusinessAddress;

And this is my child component

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

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

  }
  render() {
    const newObject = this.props.data;
    const data = Object.values(newObject);

    if(data[0] == "BusinessAddress") {
    }

    return (
      <div>

        {data.map((data) => <li>{data}</li>)}

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

      </div>
    )
  }
}



export default Check;

In the child component I want to be able to find out what component the data came from and where to place it in the DOM based on it's parent component.

You can see in my parent component BusinessAddress that I have added the name of the component to the state to pass to the child. I'm just not sure how to go about the IF statement or if I'm even passing the data in the correct manner.

Any help would be greatly appreciated!

Answer 1

You can render a parent's function as props to child, then can check the component name is exactly same or not as parent's one, and please note you should put key attribute when dealing with map function. This is better practice instead of referencing index of array. Here is solution.

in parent component

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

  ....

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

in child component

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

  }

  render() {
    const data = Object.values(this.props.data);
    const result = (this.props.handleParent("BusinessAddress"), null)
    if (result) {
        // do something here
    }
    return (
      <div>

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

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

      </div>
    )
  }
}

Answer 2

You can loop thought your keys instead of loop your values, this will allow you to use the key as the name of your field and then you can get the value with that key, for example:

render() {
const newObject = this.props.data;
const data = Object.keys(newObject);

return (
  <div>
    {
      data.map(key => {
        if(key === 'b') {
          return <div>  Business Name Line 2: {data[key]} </div>
        } else if(key === 'c') {
          return <div> Street Address: {data[key]} </div>
        }
      }) 
    }
  </div>
)
}