React: When the user interacts with the checkbox control, the state of the item should be updated from NEW to RESERVED

Question

ProductList component has a child component ProductRow , all that needs to happen is when I click the checkbox inside ProductRow component the value of the checkbox should change to RESERVED from NEW (which is passed down by props).

Do I have to use redux, just because of this?

More context ProductList is a child of ShoppingCart component which looks like this:

const ShoppingCart = React.createClass({
  propTypes: {
    shoppingCartData: PropTypes.object.isRequired
  },

  render () {
    const {assignee, customer, status, assignedAt, items, placedAt} = this.props.shoppingCartData.data

    return (
      <div>
        <Header assignee={assignee} />
        <PersonalInfo customer={customer} assignedAt={assignedAt} />
        <CartStatus status={status} customer={customer} placedAt={placedAt} />
        <ProductList items={items} />
      </div>
    )
  }
})
export default ShoppingCart

ProductList.js

    const ProductList = React.createClass({

      propTypes: {
        items: PropTypes.array.isRequired
      },

      handleProductCheckBoxClick (e) {
        console.log('handleChange', e.target.value)
      },

      render () {
        const {items} = this.props
        const handleProductCheckBoxClick = this.handleProductCheckBoxClick

        return (
          <div>
            {
              items.map((item) => {
                return (
                  <ProductRow key={item.id} onChange={handleProductCheckBoxClick} item={item} />
                )
              })
            }
          </div>
        )
      }
    })

ProductRow.js

const ProductRow = React.createClass({
  propTypes: {
    item: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired
  },

  render () {
    const { code, name, imageUrl, description } = this.props.item.product
    const {status} = this.props.item
    const {onChange} = this.props
    return (
      <div>
        <label htmlFor={code}>
          <input type='checkbox' id={code} onChange={onChange} value={status} />
          <img src={imageUrl} />
          <div className='name'>{name}</div>
          <div className='description'>{description}</div>
        </label>
      </div>
    )
  }
})

ShoppingCartData

{
   "data":{
      "id":"0335c8ed-3b41-4bc0-9fc5-adbaeeba6ed2",
      "productGroup":"7307",
      "status":"INPROGRESS",
      "assignee":{
         "id":"9018418",
         "name":"Mark"
      },
      "items":[
          {
             "id":25,
             "sequence":1,
             "status":"NEW",
             "quantity":1,
             "product":{
                "code":"730719067100000",
                "name":"Boltaart Bosbessen",
                "description":"Overheerlijke Boltaart met Bosbessen uit de keuken van de Bijenkorf.",
                "price":17.95,
                "imageUrl":"//placehold.it/57/ffffff/000000"
             }
         },
         {
            "id":26,
            "sequence":1,
            "status":"NEW",
            "quantity":1,
            "product":{
               "code":"730719067300000",
               "name":"Aarbeien Boltaart",
               "description":"Biscuitdeeg met aardbeienbavaroise, afgemaakt met aardbeiengelei en chocoladegalletjes.",
               "price":17.95,
               "imageUrl":"//placehold.it/57/ffffff/000000"
            }
        },
        {
           "id":27,
           "sequence":1,
           "status":"NEW",
           "quantity":1,
           "product":{
              "code":"730719067200000",
              "name":"Truffel Boltaart",
              "description":"Chocolade mousse en biscuitdeeg gevuld met koffierumsaus en feuilletine, overgoten met pure chocoladegelei en gegarneerd met een krul van pure chocolade en chocoladegalletjes.",
              "price":17.95,
              "imageUrl":"//placehold.it/57/ffffff/000000"
           }
        }
      ],
      "assigned":true,
      "assignedAt":"2016-05-25 10:30",
      "orderId":"36480157_CKS_N01",
      "customer":{
         "id":"00005152",
         "email":"alan.form@email.nl",
         "name":"Alan Ford",
         "phoneNumber":"+31123456789"
      },
      "placedAt":"2016-05-24 09:00",
      "numberOfItems":3
   }
}

A component can't update it's own props, but can update it's own state and and props of it's children. You could pass a method as props to a child and whenever a change occurs you can call that. But here `ShoppingCart` gets the data as props. I know it works on a single level. Don't know multiple levels of heirarchy. — DroidNoob, Mar 21 '17 at 04:54

score 1 · Answer 1 · edited May 23 '17 at 12:00

What you can do is assign props you get from the parent as the state of the component. And, use that state in the render function. And when you update the state of the component, the component will update.

But, remember that assigning props to the state is considered anti-pattern: https://stackoverflow.com/a/28785276/1553053

My suggestion is start using Redux or Alt. Alt is fairly easy to get started. They will allow you to handle application wide state and this kind of situation can be handled in much easier and nicer manner.

React: When the user interacts with the checkbox control, the state of the item should be updated from NEW to RESERVED

1 Answers1