2

I was trying to handle changing of states whenever I type something inside the two text boxes and then when the user click the button, it will set the state to it's state and then console.log the current change state to the console.

Basically I have this:

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            catname: '',
            catamt: 0
        };

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

    addBudget(e) {
        e.preventDefault();

        this.setState({
            catname: e.target.value,
            catamt: e.target.value
        });

        console.log('console log catname here.....', this.state.catname);
        console.log('console log catamt here.....', this.state.catamt);
    }
}

And then inside my component where the form is sitting:

import React from 'react';

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

    render() {
        return (
        <div className="cat-input">
          <input
            type="text"
            name="categoryname"
            placeholder="Budget Category"
          />
          <input
            type="number"
            name="categoryamount"
            placeholder="Target Budget"
          />
        </div>
        <button onClick={this.addBudget}>+</button>
        );
    }
}

How do I pass along my input value to my function and console log the change of state?

Improve this question
2
  • You have 2 classes? AddBudget and App? Commented May 4, 2018 at 15:20
  • @riwu: yep. AddBudget is a different component sitting inside my component files. Commented May 4, 2018 at 15:21

1 Answer 1

Reset to default
3

Something more like that, I recommended using controlled input with react.

You can read more about it here https://reactjs.org/docs/forms.html

An example for you :) https://codesandbox.io/s/2486wxkn9n

First you need to keep track on the value with the state. Second with the form you can handle the submit. This way if a user click the button or press enter you can handle the submit method.

Inside the _handleChange method you receive the event. So this is the input change. If you console.log this value you can see he have the name, the name you pass in the input. This way you can use it as a key variable for your object. So one function for 2 :). 

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      catname: '',
      catamt: 0
    };

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

  addBudget = (e) => {
    e.preventDefault();

    console.log('console log catname here.....', this.state.catname);
    console.log('console log catamt here.....', this.state.catamt);
  }

  _handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  render() {
    return (
      <AddBudget handleChange={this._handleChange} addBudget={this.addBudget} />
    )
  }
}

export default class AddBudget extends React.Component {
  render() {
    return (
        <div className="cat-input">
          <form onSubmit={this.props.addBudget}>
            <input
            type="text"
            name="catname"
            onChange={this.props.handleChange}
            placeholder="Budget Category"
          />
          <input
            type="number"
            name="catamt"
            placeholder="Target Budget"
            onChange={this.props.handleChange}
          />
          <button type="submit">+</button>
          </form> 
        </div>
    );
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Can you explain this part a bit more: [e.target.name]: e.target.value
@MarcSolva I just edited let me know if you have other question :)
:) Hope that help you :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.