OnClick related function from react component doesn't work

Question

I am trying to pass a state to a component so i can update it's state whenever i type in a component's text field. However this is not working i am not sure why. Most of the examples I've found online were dealing with the similar problems on the same class. However i need to juggle this state between components.

Not only the state doesn't change but if i add the "value={information}" part in the textfield it doesn't let me type.

Here is an example of the code.

Class that uses the component:

class SomeClass extends Component {
  state = {
    information: '',
  };

  handleInfoChange(event) {
    this.setState({
      information: event.target.value,
    });
  }

render(){
  return(
    <div>
      <TesteComponent
       information={this.state.information}
       handleInfoChange={this.handleInfoChange}
      />

Component code:

const TesteComponent = ({information}, handleInfoChange) => (
    <Dialog
      disableEscapeKeyDown
      disableBackdropClick
    >
      <DialogContent>
        <DialogContentText>
          <p>Emails:</p>
          <TextField value={information} className="bootstrapInput" onChange={() => handleInfoChange}/>
        </DialogContentText>
      </DialogContent>
    </Dialog>

PS: I posted solely the part that is giving me trouble since the component in it's entirety works for the exception of the Onchange method problem i am having. PS2: I forgot to add handleInfoChange being passed to the component in the question. It ahs been updated now.

why is handleInfoChange outside of the props destructured object? Are you sure it is being called? — hasanain
– hasanain, Commented Sep 25, 2018 at 17:29
it should be since other components work on that class just fine with other states that are updated. None of them have a textfield though. — Otorrinolaringologista -man
– Otorrinolaringologista -man, Commented Sep 25, 2018 at 17:29
i am sure it is being called since i have other methods there that also change states, like a boolean state that i have that opens and closes the dialog box. — Otorrinolaringologista -man
– Otorrinolaringologista -man, Commented Sep 25, 2018 at 17:30

stackoverfloweth · Accepted Answer · 2018-09-25 17:30:02Z

2

TesteComponent doesn't have access to handleInfoChange. You can pass that function as a property like this

  <TesteComponent
   information={this.state.information}
   handleInfoChange={this.handleInfoChange}
  />

and then in TesteComponent change it to

const TesteComponent = (props) => (
    <Dialog
      disableEscapeKeyDown
      disableBackdropClick
    >
      <DialogContent>
        <DialogContentText>
          <p>Emails:</p>
          <TextField value={props.information} className="bootstrapInput" onChange={() => props.handleInfoChange}/>
        </DialogContentText>
      </DialogContent>
    </Dialog>

answered Sep 25, 2018 at 17:30

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Khatri · Accepted Answer · 2018-09-25 17:33:34Z

Firstly, you are not passing handleInfoChange function to TesteComponent as props Secondly, you can not destructure and use arguments without destructuring together. You should instead write const TesteComponent = ({information, handleInfoChange}) => ( after passing the handleInfoChange as props

const TesteComponent = ({ information , handleInfoChange }) => (
    <Dialog
      disableEscapeKeyDown
      disableBackdropClick
    >
      <DialogContent>
        <DialogContentText>
          <p>Emails:</p>
          <TextField value={information} className="bootstrapInput" onChange={() => handleInfoChange}/>
        </DialogContentText>
      </DialogContent>
    </Dialog>

SomeClass

class SomeClass extends Component {
      state = {
        information: '',
      };

      handleInfoChange(event) {
        this.setState({
          information: event.target.value,
        });
      }

    render(){
      return(
        <div>
          <TesteComponent
           information={this.state.information}
           handleInfoChange={this.handleInfoChange}
          />
      )
   }
}

wdm · Accepted Answer · 2018-09-25 17:40:12Z

1

class SomeClass extends Component {
    state = {
        information: ''
    };
    // changed to arrow function to bind 'this'
    handleInfoChange = event => {
        this.setState({information: event.target.value});
    }
    render() {
        return(
            <div>
                <TesteComponent
                    information={this.state.information}
                    // pass handleInfoChange as a prop
                    handleInfoChange={this.handleInfoChange}
                />
            </div>
        );
    }
}

const TesteComponent = ({information, handleInfoChange}) => (
    <Dialog disableEscapeKeyDown disableBackdropClick>
        <DialogContent>
            <DialogContentText>
                <p>Emails:</p>
                <TextField
                    className="bootstrapInput"
                    value={information} 
                    onChange={handleInfoChange}
                />
            </DialogContentText>
        </DialogContent>
    </Dialog>
);

edited Sep 25, 2018 at 17:40

answered Sep 25, 2018 at 17:34

wdm

7,1891 gold badge31 silver badges31 bronze badges

1 Comment

wdm Over a year ago

I changed handleInfoChange to an arrow function (which is the same as binding this) so you can call this.setState. Then I passed handleInfoChange as a prop to <TesteComponent/>. Finally, I properly deconstructed your props here: const TesteComponent = ({information, handleInfoChange})

Neel Patel · Accepted Answer · 2018-09-25 17:43:59Z

1

first of all you should bind your click event and set in state and here i am going to print change value in console ....

here is my code try this one....

class SomeClass extends Component {
  state = {
    information: '',
  };
this.handleInfoChange= this.handleInfoChange.bind(this);

handleSubmit = event => {

    event.preventDefault();
}

  handleInfoChange(event) {
    this.setState({
      information: event.target.value,
      console.log(this.state.information);
    });
  }

render(){
  return(
    <div>
      const TesteComponent = ({information}, handleInfoChange) => (
    <Dialog
      disableEscapeKeyDown
      disableBackdropClick
    >
      <form onSubmit={this.handleSubmit}>
      <DialogContent>
        <DialogContentText>
          <p>Emails:</p>
          <TextField value={information} className="bootstrapInput" onChange={this.handleInfoChange}/>
        </DialogContentText>
      </DialogContent>
    </Dialog></div></form>

edited Sep 25, 2018 at 17:43

answered Sep 25, 2018 at 17:41

Neel Patel

2,19620 silver badges17 bronze badges

2 Comments

Otorrinolaringologista -man Over a year ago

as someone who is fairly new to react, what is the purpose of bind? I am still testing the other answers.

Neel Patel Over a year ago

if any changed on click event then we tell state to re-render using .bind(this) and change the value

Collectives™ on Stack Overflow

OnClick related function from react component doesn't work

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related