CODEWITHSUNDEEP
reactjs
Johnny88520
Johnny88520

Reputation: 157

How to pass a function into children(siblings) components in reactjs?

I'm new to reactjs. I want to click an image and then go to dropdown component, and then every time when I switch the selection for language, it will output a different language in console in playlist component.

Playlist component and dropdown component are siblings. How should I achieve that? I try to pass a function to dropdown component, but nothing happen.

Parent: entry.js

 import React from 'react';
 import mind_zebra from '../../images/MindScribe-zebra.png';
 import Dropdown from './Dropdown/Dropdown.js';

 export default class Entry extends React.Component {
     constructor (props) {
     super(props);

     this.state = {
      value : "1",
      hideZebraPic : false,
     }

     this.changeLanguage = this.changeLanguage.bind(this);
    }

     onClickHandler = () => {
     this.setState( prev => ({ hideZebraPic: !prev.hideZebraPic}));
    };

     changeLanguage (event) {
     console.log("hello");
     this.setState({ value: event.target.value });
    }

    render() {
      if (this.state.hideZebraPic) {
      return (
        <div>
          <Dropdown langueageSelection={this.changeLanguage}/>
        </div>
    );
    } else {
      return (
        <div>
          <img src={mind_zebra} onClick={this.onClickHandler} className="MindZebraPic" alt="zebra"/>
        </div>
      );
    }
  }
}

one child: dropdown component

import React from 'react';

export default class Dropdown extends React.Component {

  changeLanguage(event) {
    this.setState({ value: event.target.value });
    console.log("hello");
  }

  render () {
    return (
      <form >
        <label>
          <div className="langueageSelection">
            <select onChange={this.handleChange}>

              <option value=""> Please select a language </option>
              <option value="1"> English </option>
              <option value="2"> Chinese </option>
            </select>
          </div>
        </label>
      </form>
    );
  }
}

A second child: Playlist component

import React from 'react';

export default class Playlist extends React.Component {

  render() {
    if (this.props.langueageSelection === "1"){
      console.log("English");

    }
    else if(this.props.langueageSelection === "2"){
      console.log("Chinese");
    }
    return (
      <div> Hi</div>
    );
  }
}

Upvotes: 0

Views: 69

Answers (1)

Omar
Omar

Reputation: 3411

Well first in dropdown component you are using this.setState but theres no state.

Use a getter function in Entry component.

 this.state = {
      value : "1",
      hideZebraPic : false,
      Language:'',
     }

getLanguage = (language) => this.setState({Language:language})

pass the function getLanguage down as a prop to dropdown.

in your render do this

<Dropdown getLanguage={this.getLanguage}/>

Now in dropdown component

 <select onChange={(e) => this.props.getLanguage(e.target.value)}>
              <option value=""> Please select a language </option>
              <option value="1"> English </option>
              <option value="2"> Chinese </option>
            </select>

Now you can use this.props.Language anywhere if you pass it down as a prop to a component inside of entry.

What you need to figure out is when you want to render the playlist component.

Upvotes: 1

Related Questions