CODEWITHSUNDEEP
reactjs
Marty
Marty

Reputation: 544

ReactJS: How to use EventListener in child component created in parent

I have this problem when i want to make some events with children from map when i have eventlistener. How to use EventListener in child component created in parent?

Try to resize window:

https://codesandbox.io/s/2j2wnyvln

https://2j2wnyvln.codesandbox.io/

Does it correct code?

Upvotes: 5

Views: 1571

Answers (2)

kschiffer
kschiffer

Reputation: 142

If I understood the question correctly and you want to hide certain child elements based on the parents size, one way to do it could be setting a flag inside the state depending on the size of the parent:

handleResize = e => {
  if (this.state.navHidden === false && window.outerWidth > 500) {
    this.setState({ hidden: true })
  } else if (this.state.navHidden === true && window.outerWidth <= 500) {
    this.setState({ hidden: false })
  }
}

then, in your render function you could prevent children from being displayed like so:

render(){
    return(
       this.props.navigation.map(n=>{
         !(n.isBig && this.state.navHidden) && <NavigationList key={n.id} title={n.title} target={n.target} href={n.href}/>
       })
    )
}

n.isBig would be a flag that you set on the nav items to determine if those should be hidden in smaller screen sizes. But you probably have some sort of other measure to determine that.

Since what you are trying to do is display logic, you should also check if the desired behaviour can be done using plain CSS and media-queries.

Upvotes: 0

Yura
Yura

Reputation: 3260

You can pass event listner with props.
Here is example from documentation (look at onTemperatureChange property of TemperatureInput):

// Child
class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

// Parent
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Upvotes: 1

Related Questions