ReactJS Varying Form Inputs with Props Array

Question

Trying to figure out how to dynamically handle a varying amount of props data for a form. My google hunt has come up with nothing. I'm collecting data on number of appointments based on number dogs a related user has. So props would look like this:

this.props: {
  user: {
    id: 11
    name: "Steve",
    age: 32
  }
  dogs: [{
    id: 18,
    name: "Rover"
  },{
    id: 42,
    name: "Snugglemittens"
  }]
}

Every user has a different number of dogs. And my parent element view looks like this:

render(){
    <form onSubmit={this._handleSubmit.bind(this)}>
      {this.props.dogs.map((dogge)=>{
        return(<MsgView dog={dogge} key={dogge.id} />;)
      }}
      <button type="submit">Submit</button>
    </form>
}

Then inside each Message view I want to collect two check boxes about each dog:

render(){
  <div className="form-group" data-toggle="buttons">
    <label><input type="checkbox" autoComplete="off"/> XYZ </label>
  </div>
  <div className="form-group" data-toggle="buttons">
    <label><input type="checkbox" autoComplete="off"/> ABC </label>
  </div>
}

I'm not sure how to get the filled in data back to my backend using ajax. My initial thought was to use state to collect the info and send it back all at once. I'm pretty sure React can pass a function through a prop that I can use, but I can't find a good example.

This would have you creating a handleFormSubmit() method that initiates or sends a request with the data to your backend. — agm1984
– agm1984, Commented Oct 2, 2017 at 18:41
@agm1984 Can you direct me to an example or documentation to help me out? — RedOster
– RedOster, Commented Oct 2, 2017 at 20:29
This is the industry standard way. Stephen Grider has some awesome tutorials on Udemy also, if you want to explore it effectively as fast as possible. — agm1984
– agm1984, Commented Oct 2, 2017 at 20:52

agm1984 · Accepted Answer · 2017-10-02 23:46:12Z

This is what I'm thinking could work. You could populate this.state when the view loads,

// or in a lifecycle method componentWillMount or componentDidMount instead
// and do in constructor, this.state = { dogs: [] }
// sorry, this is kind of hard to do abstractly

constructor(props) {
  super(props)
  // on pageload, set initial state to the doggo array
  this.state = {
    dogs: this.props.dogs
  }
}

// alternate solution potential:
componentDidMount() {
  this.setState({ dogs: this.props.dogs })
}

_handleSubmit() {
  console.log('FIELDS:', this.state.dogs)
  // now we're in business if you see your data
}

render(){
    if (this.state.dogs.length === 0) return <div>No dogs yet, loading spinner</div>
    return (
      <form onSubmit={() => this._handleSubmit()}>
        {this.state.dogs.map((dogge)=> {
          return(
            <MsgView
              dog={dogge}
              key={dogge.id}
              {/* on change, update state of field */}
              onChange={(e) => this.setState({
                {/* ie: dogs[0], dogs[45]
                    you might have to use ES6 .find() or something
                    you guys/girls see where I'm going with this
                    basically update the array or make better data structure.
                    I like the idea of this.state.dogs[doggo]
                    (so dogs is an object with dynamic keys)
                    then you can just update the value of that key with setState */}
                dogs[this.state.dogs.indexOf(dogge)]: e.target.value
              })}
            />
          )}
        }
        <button type="submit">Submit</button>
      </form>
    )
  }

I don't remember if its e.target.value, but you should see what I'm getting at.

You transfer dogs from props to component state
keep state up to date
read from it after submit

Collectives™ on Stack Overflow

ReactJS Varying Form Inputs with Props Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related