如何将具有切换 function 的 state 组件转换为 reactjs 中的无状态组件？

Question

I am trying to convert the following component to a functional one so I could use the react context API?

The JSX code for the component I want to convert

class pizzaModal extends Component {
  state = {
    selected: "small",
    showModal: true,
    selectedOrder: null
  }
  toggleHandler = (size)=> ()=>{
    this.setState({
            toggle: size
        });
  }
  addToOrders = (p)=>{
    this.setState(prevState=>({
      selectedOrder: p
    }))
  }
  
  render (){
    let attachedClasses = [styles.ImageContainer]
    if(this.state.toggle==='small'){
      attachedClasses = [styles.ImageContainer, styles.Small]
    }
    if(this.state.toggle==="medium"){
      attachedClasses = [styles.ImageContainer, styles.Medium]
    }
    if(this.state.toggle==="large"){
      attachedClasses=[styles.ImageContainer, styles.Large]
    }
    return (
      <Aux>
        <div className={styles.Pizzamodal}>
          <div className={styles.ModalContainer}>
            <div className={attachedClasses.join(' ')}>
              <img  src={this.props.image} alt="pizzapicture"/>
            </div>
            <div className={styles.DetailsContainer}>
              <div>
                <div className={styles.TextDetails}>
                  <h1>{this.props.name}</h1>
                  <p>{this.props.ingredients}</p>
                </div>
                <div>
                <div className={styles.Form}>
                <form className={styles.switchButton}>
                  <input type="radio" name="pizza" id="small" value="small" onChange={this.toggleHandler("small")}
                            checked={this.state.toggle==="small"}/>
                  <label for="small">Small</label>
                  <input type="radio" name="pizza" id="medium" value="medium" onChange={this.toggleHandler("medium")}
                            checked={this.state.toggle==="medium"}/>
                  <label for="medium">Medium</label>
                  <input type="radio" name="pizza" id="large" value="large" onChange={this.toggleHandler("large")}
                            checked={this.state.toggle==="large"}/>
                  <label for="large">Large</label>
                </form>
                </div>
                <div className={styles.orderButton}>
                  <button onClick={this.props.addToOrders}>Add to basket for ₦{this.props.price}</button>
                </div>
              </div>
              </div>
            </div>  
            <div className={styles.Navbar} onClick={this.props.clicked}>
            <div></div>
            <div></div>
          </div>
          </div>
         
      </div>
      </Aux>
    )
  }
}
export default pizzaModal;

This is what I have done

const PizzaModal= (props) => {
  const [Selected, setSelected] = useState('small')
  
  const toggleHandler = (size)=>{
    setSelected({
            toggle: Selected
        });
  }
  /*const [orders, setOrders] = useContext([CartContext]);
  const addToOrders=()=>{
    const pizza = {name: this.props.name, ingredients: this.props.ingredients, image: this.props.image, price: this.props.price}
      setOrders([...orders, pizza])
  
  }*/
  
    let attachedClasses = [styles.ImageContainer]
    if(setSelected(Selected==='small')){
      attachedClasses = [styles.ImageContainer, styles.Small]
    }
    if(setSelected(Selected==="medium")){
      attachedClasses = [styles.ImageContainer, styles.Medium]
    }
    if(setSelected(Selected==="large")){
      attachedClasses=[styles.ImageContainer, styles.Large]
    }
    return (
      <Aux>
        <div className={styles.Pizzamodal}>
          <div className={styles.ModalContainer}>
            <div className={attachedClasses.join(' ')}>
              <img  src={props.image} alt="pizzapicture"/>
            </div>
            <div className={styles.DetailsContainer}>
              <div>
                <div className={styles.TextDetails}>
                  <h1>{props.name}</h1>
                  <p>{props.ingredients}</p>
                </div>
                <div>
                <div className={styles.Form}>
                <form className={styles.switchButton}>
                  <input type="radio" name="pizza" id="small" value="small" onChange={toggleHandler("small")}
                            checked={setSelected(Selected==='small')}/>
                  <label for="small">Small</label>
                  <input type="radio" name="pizza" id="medium" value="medium" onChange={toggleHandler("medium")}
                            checked={setSelected(Selected==='medium')}/>
                  <label for="medium">Medium</label>
                  <input type="radio" name="pizza" id="large" value="large" onChange={toggleHandler("large")}
                            checked={setSelected(Selected==='large')}/>
                  <label for="large">Large</label>
                </form>
                </div>
                <div className={styles.orderButton}>
                  <button >Add to basket for ₦{props.price}</button>
                </div>
              </div>
              </div>
            </div>  
            <div className={styles.Navbar} onClick={props.clicked}>
            <div></div>
            <div></div>
          </div>
          </div>
         
      </div>
      </Aux>
    )
  
}
export default PizzaModal;

I have no error messages on my IDE or on the webpage but when I click on the button that toggles the modal on I get a blank white screen with no error messages.

Answer 1

couple of mistakes i spotted in your code see if this changes anything

1. You dont need a seperate toggleHandler function to change value of Selected that is what setSelected is there for.
2. You gave setSelected an object

setSelected({toggle: Selected});

instead u should give it the value of Selected

setSelected(Selected);

3. And in all the if statements

if(setSelected(Selected==='small'))

is wrong u just have to check

if(Selected==='small')

4.And finally in OnChange

onChange={toggleHandler("small")}

you can just call setSelected

onChange={() => setSelected("small")}

Answer 2

The useState hook returns the current value of the state variable and a function to change it. In your case with

const [selected, setSelected] = useState('small')

you would use selected anywhere you previously would have used this.state.selected and use setSelected() anywhere you previously would have used this.setState({ selected }) . So the first issue in your code is the misuse of the setter function when reading the state value.

When you want to pass a function to a component, you have to make sure you're passing the function and not a call to the function. For example

onChange={toggleHandler("large")}

will immediately get the return value of toggleHandler("large") and try to call that when the value changes. Your definition of toggleHandler doesn't return anything, so when you change your radio buttons, you're actually just trying to call undefined as a function, which of course doesn't work.

Also, the onChange handler of an input passes a synthetic event. You should use that to extract which radio button was pressed.

Try something like this:

const PizzaModal = (props) => {
    const [selected, setSelected] = useState('small')
    
    const toggleHandler = (event) => {
      setSelected(event.target.value);
    }
  
    let attachedClasses = [styles.ImageContainer]
    if (selected === 'small')) {
      attachedClasses = [styles.ImageContainer, styles.Small]
    }
    if (selected === "medium")) {
      attachedClasses = [styles.ImageContainer, styles.Medium]
    }
    if (selected === "large")) {
      attachedClasses=[styles.ImageContainer, styles.Large]
    }
    return (
      <Aux>
        <div className={styles.Pizzamodal}>
          <div className={styles.ModalContainer}>
            <div className={attachedClasses.join(' ')}>
              <img  src={props.image} alt="pizzapicture"/>
            </div>
            <div className={styles.DetailsContainer}>
              <div>
                <div className={styles.TextDetails}>
                  <h1>{props.name}</h1>
                  <p>{props.ingredients}</p>
                </div>
                <div>
                <div className={styles.Form}>
                <form className={styles.switchButton}>
                  <input type="radio" name="pizza" id="small" value="small" onChange={toggleHandler} checked={selected === 'small'}/>
                  <label for="small">Small</label>
                  <input type="radio" name="pizza" id="medium" value="medium" onChange={toggleHandler} checked={selected === 'medium'}/>
                  <label for="medium">Medium</label>
                  <input type="radio" name="pizza" id="large" value="large" onChange={toggleHandler} checked={selected === 'large'}/>
                  <label for="large">Large</label>
                </form>
                </div>
                <div className={styles.orderButton}>
                  <button >Add to basket for ₦{props.price}</button>
                </div>
              </div>
              </div>
            </div>  
            <div className={styles.Navbar} onClick={props.clicked}>
            <div></div>
            <div></div>
          </div>
          </div>
         
      </div>
      </Aux>
    )
  
}
export default PizzaModal;

For future reference, errors also come through in the browser's Javascript console (usually in the developer tools section). You can check there for errors. My guess is that some combination of trying to call undefined as a function and a render loop due to the setSelected calls is what was causing your issue.