React - Cannot update component while render different component / Provided 'checked' without 'onChange' handler

Question

I've a problem within my CartScreen. It's about chosing payment method. It worked everything fine all the time and today i open the cartscreen and i got a lot of error but if I remember correctly i didn't touch this component for quite some time...

Here i call the component in my CartScreen:

const [sliderPaymentValue, setSliderPaymentValue] = useState('');

<PaymentChoice
 setState={setSliderPaymentValue}
/>

And this is my PaymentChoice component:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { systemSettings } from '../../../redux/actions/systemSettingsAction';
import './optionPicker.css';

const PaymentChoice = ({ setState }) => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(systemSettings());
  }, []);

  const settingsstate = useSelector((state) => state.systemSettingsReducer);
  const { settings } = settingsstate;

  //console.log(settings[0]?.payments);

  function handleChange(event) {
    setState(event.target.value);
  }
  return (
    <div className='border-1 border-red-500 flex justify-center'>
      {settings[0]?.payments.map((payment) => {
        return (
          <div>
            <div className=''>
              <input
                checked={settings[0]?.payments.length === 1 ? 'checked' : null}
                type='radio'
                id={payment.value}
                name='payment'
                value={payment.value}
                onChange={
                  settings[0]?.payments.length === 1
                    ? setState(payment.value)
                    : handleChange
                }
              ></input>
              <label className='inline-block w-32' for={payment.value}>
                <img
                  src={`/images/${payment.value}.png`}
                  alt={`${payment.value}.png`}
                  className='max-h-[50px] mx-auto'
                />
                <div className='text-center'>{payment.label}</div>
              </label>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default PaymentChoice;

Edit: If i use bargeld (german word for cash money) it works (This is one of 2 options you can choose from PaymentChoice one has "paypal" and the other "bargeld"

const [sliderPaymentValue, setSliderPaymentValue] = useState('bargeld');

score 0 · Answer 1 · answered Aug 04 '22 at 14:36

0

it seems like your error is in the CartScreen page where you imported the PaymentChoice component, check it once that it isn't being imported like ''' import { PaymentChoice } from 'filepath' ''' instead it should simply be import PaymentChoice from 'filepath'

And if you added the onChange function later or something and it still isn't working, one thing you can do is use just an arrow function instead of the turnory operator, and if you're using this settings[0]?.payments.length, it might be better to define a const for it before you're using the map function

answered Aug 04 '22 at 14:36

yagyesh

94
7

import PaymentChoice from './PaymentChoice' - Thats how i import it. – zuZuu Aug 04 '22 at 14:42
And i think the onChange isn't the problem bcs the files are 1:1 same like with a backup some weeks ago and there everything went fine – zuZuu Aug 04 '22 at 14:43
have you checked out solutions on this Q. https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string – yagyesh Aug 04 '22 at 14:53
But this is about the import again or? And if I import with curly braces im getting this error: export 'PaymentChoice' (imported as 'PaymentChoice') was not found in './PaymentChoice' (possible exports: default) ... So it must be without – zuZuu Aug 04 '22 at 14:58
Wait a moment ill edit the my main post. I found a little solution – zuZuu Aug 04 '22 at 15:01
So when useState comes with a basic value that is valid it's working... But before it worked with empty string – zuZuu Aug 04 '22 at 15:05

score 0 · Answer 2 · answered Aug 04 '22 at 15:15

The Problem was about useState...

Before it was sliderPaymentValue === 0
Change it with a empty String fixed it
 
{sliderPaymentValue === '' ? (
 ''
 ) : sliderPaymentValue === 'bargeld' ? (
 <div onClick={cashTranSuccess}>
 <CashButton />
 </div>
 ) : (
 <PayPalButton
 />
)}

React - Cannot update component while render different component / Provided 'checked' without 'onChange' handler

2 Answers2