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.

Answer 1

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>

Answer 2

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

Answer 3

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>
);

Answer 4

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>