React - How can I setState in Input component in that case?

Question

I have two components: Input and Buttons.

Input code:

import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import './style.css';

import Buttons from '../Buttons';

class Input extends Component {
  constructor(props) {
    super(props);
    this.state = {
      password: '',
      selectedButtons: [],
    };
  }

  handleInputChange(pass) {
    this.setState({ password: pass });
  }

  handleButtonSelectTwo(selected) {
    // this.setState({ selectedButtons: selected });
    console.log(selected);
  }

  render() {
    return (
      <div>
        <div className="Input-textfield">
          <TextField
            hintText="Paste your password here to begin"
            value={this.state.password}
            onChange={event => this.handleInputChange(event.target.value)}
          />
        </div>
        <div>
          <Buttons handleButtonSelectOne={this.handleButtonSelectTwo} />
        </div>
      </div>
    );
  }
}
export default Input;

and Buttons code:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const style = {
  button: {
    margin: 2,
    padding: 0,
    minWidth: 1,
  },
};

const Buttons = props => {
  const arr = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    17,
    18,
    19,
    20,
  ];

  const handleButtonSelectZero = props.handleButtonSelectOne;

  const allButtons = arr.map(el => (
    <RaisedButton
      key={el}
      label={el}
      style={style.button}
      onClick={() => handleButtonSelectZero(el)}
    />
  ));

  return <div>{allButtons}</div>;
};

export default Buttons;

The question is about handleButtonSelectTwo function. So with console.log, it works. When I click for example button number 11 it prints to console '11'. So the way I understand that is that handleButtonSelectTwo function is passed as a prop to Buttons child and there it is fired.

In that case, if I want now to add code like this to handleButtonSelectTwo inside Input component:

  handleButtonSelectTwo(selected) {
    this.setState({ selectedButtons: selected });
  }

it will not work because it will be fired inside Buttons component which is a stateless component.

So if I want to have that clicked data inside my Input component, how can I do this?

Inside my Input component I have the state like this:

  constructor(props) {
    super(props);
    this.state = {
      password: '',
      selectedButtons: [],
    };
  }

and I want it to be populated by buttons that I have clicked.

Is there some simple way to do that? (without using redux for example)

Quick suggestion: You may want to bind ```handleButtonSelectTwo``` for proper ```this``` context. In the constructor of ```Input``` component enter in ```this.handleButtonSelectTwo = this.handleButtonSelectTwo.bind(this)``` — Varinder, Feb 09 '18 at 03:19
Sweet, happy to help, I've added this as an answer for you to mark — Varinder, Feb 09 '18 at 03:27

score 1 · Accepted Answer · answered Feb 09 '18 at 03:26

1

You may want to bind handleButtonSelectTwo for proper this. In the constructor of Input component enter in this.handleButtonSelectTwo = this.handleButtonSelectTwo.bind(this)

answered Feb 09 '18 at 03:26

Varinder

2,634
1
17
20

This has been answered countless times. Please look for duplicates instead of answering. – Andrew Li Feb 09 '18 at 03:27

React - How can I setState in Input component in that case?

1 Answers1