Binding a value inside an array in React

Question

I have a component that takes a size property which is used in an array to render a list of choices. I found that when the size is changed via setState() in the higher level component this doesn't propagate to PizzaComponent. I can tell this is because of the array; map() doesn't get called again. If it were just a templated value it would work.

Another way I have found to make it work is to make pizzaChoices part of the component's state and then overwrite the array. This requires a lot of duplicate code and seems overkill.

Is there a way to pass a dynamic reference in an array or make a state value dependent on another state value?

const PizzaComponent = (props) => {
    const {
        size
    } = props

    const pizzaChoices = [
      {
        value: 'cheese',
        label: 'Cheese',
        price: '10.00',
      },
      {
        value: 'pepperoni',
        label: 'Pepperoni',
        price: size,
      },
    ];

    return (
        {
          pizzaChoices.map((choice, i) => (
            <MyFancyComponent
              key={`pizza-${choice.value}`}
              label={choice.label}
              price={choice.price}
              value={choice.value}
              />
          ))
        }   
    )   
}

Khiem Tran · Accepted Answer · 2018-11-08 02:44:44Z

I see no problem with the code, the PizzaComponent updates, changed a bit to fit React 15.5 on StackOverFlow/

function MyFancyComponent({label, price, value}) {
  return (
    <div>
      {label} - {price} - {value}
    </div>
  );
}

function PizzaComponent(props) {
    const {
        size
    } = props

    const pizzaChoices = [
      {
        value: 'cheese',
        label: 'Cheese',
        price: '10.00',
      },
      {
        value: 'pepperoni',
        label: 'Pepperoni',
        price: size,
      },
    ];

    return (
      <div>
        {pizzaChoices.map((choice, i) => (
            <MyFancyComponent
              key={`pizza-${choice.value}`}
              label={choice.label}
              price={choice.price}
              value={choice.value}
              />
          ))
        }   
      </div>
    )   
}

class App extends React.Component {
  componentWillMount() {
    this.state = {
      size: 5
    };
    
    this.changeSize = this.changeSize.bind(this);
  }
  changeSize() {
    const size = this.state.size + 5;
    this.setState({ size });
  }
  render() {
    return (
      <div>
        <button onClick={this.changeSize}>Change Size</button>
        <PizzaComponent size={this.state.size} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Ah I see, my error was that I wasn't using setState() to mutate the value. Thanks!

Collectives™ on Stack Overflow

Binding a value inside an array in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related