Warning: Cannot update a component (`App`) while rendering a different component (`SwiperSlide`)

Question

I'm a beginner of react please help to resolve this issues

Gate.js


    function sendData(send) {
        props.setGet(send);
    }
...
                <SwiperSlide id='slide01'>
                    {({ isActive }) => (
                    <div className='nav_title'>
                        { isActive === true ? sendData("1") : null}
                        ...
                    </div>
                    )}
                </SwiperSlide>
}

Apps.js

const [get, setGet] = useState('');
...   
      <Gate setGet={setGet}/>
      <Contents value={get}/>
...

Contents.js

const value = props.value;

...

<div className='contents'>
            {value === "1" ? <div className='show_animation'><Offers/></div> : null}
            {value === "2" ? <div className='show_animation'><Booking/></div> : null}
            {value === "3" ? <div className='show_animation'><About/></div> : null}
            {value === "4" ? <div className='show_animation'><Guide/></div> : null}
        </div>
...

I wanna make like this
enter image description here

2 pages connecting automatically

Can you give more context on what you're trying to achieve?. You should not call setGet directly in the component markup, that causes a state update every time the component renders. You should enclose that setGet call in an event handler, and attach it to something like an onClick. If you can provide more context on what is that you're intention is with that setGet call I could elaborate an answer — lakardion
– lakardion, Commented Aug 1, 2022 at 3:04
Welcome to StackOverflow, please copy/paste your code (the part of the problem) into the question, and format it using the code formatted button at the top of the edit page of the question. and please do not paste images of code — Islam Y-
– Islam Y-, Commented Aug 1, 2022 at 3:33

bitchwhocodes · Accepted Answer · 2022-08-01 04:02:49Z

This is a simplified version of what I think the component structure of your code looks like based on the photos.

and I'm also not sure if this is what you are trying to achieve. If you intend on sharing state between components and updating that value in children the components, This is how you could do it.

You should always be conscious of which components will need state and try to put your stateful logic in the parent of all the children which need it.

and once you have that then you need to decide which child components will update this state, If it happens to be in the Contents component as it is in this example, then you need pass a function prop to that child. Which is onSomethingChanged={handleChange} in this example. and then to update the handleChange function, you need to use a useCallback in the child component that calls the onSomethingChanged function.

const App = () => {

    const [statefulLogic, setStatefulLogic] = useState('');
    //because state is updateed in this parent component, any children receiveing props will update with this;

    const handleChange = (props) => {
        setStatefulLogic(props)
    }

    return (
        <>
            <Gate yourprops={statefulLogic} />
            <Contents onSomethingChanged={handleChange} yourprops={statefulLogic}/>
            {/** when useCallback is called this function /handleChange/ will be called with the arguments given in the useCallback  */}
        </>
    )
}

const Gate = (props) => {

    useEffect(() => {
        console.log(props.yourprops)
    }, [props]) // when props is updated this useEffect will run
    
    return (
        <>
            <children />
            <children />
        </>
    )
}

const Contents = (props) => {

    const newValue = ''; 

    const handleCLick = useCallback(() => {
        props.onSomethingChanged(newValue)
    }, [props]) // this dependency may be different depending on your use case
    // this useCallback will pass the newValue back to the parent component


    return (
        <>
            <children />
            <children />
            <button onClick={handleClick}>Click me</button>
           // when this is clicked, the useCallback updates state in the parent component
           //  and that updates the state in all children which are using that state 
        </>
    )
}

thanks for reply :) could you please check my code again? I upload my new codes and what I want

Collectives™ on Stack Overflow

Warning: Cannot update a component (`App`) while rendering a different component (`SwiperSlide`)

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