useEffect in React unable to e-render

user_4353226 0
Viewed 46

Just trying to understand the useEffect hook. I simply want a button when clicked to have a function identify the ID, then have useEffect render a conditional statement.

I think I have React listening for the change of setJoin or setCreate,the function handleClick changes these values successfully, however here is no rerender.

Something fundamental I am not yet understanding here?

import CreateSign from "./CreateSign";
import JoinSign from "./JoinSign";
import {useState, useEffect} from 'react';

const Starter = () => {
    const [isJoin, setIsJoin] = useState(null);  
    const [isCreate, setIsCreate] = useState(null);
    var [setJoin] = useState(null);
    var [setCreate] = useState(null);
    
    const handleClick = (e) => {
        if(e.target.id === 'join') {
            setJoin = true;
            setCreate = null;
        }
        if(e.target.id === 'create') {
            setCreate = true;
            setJoin = null;
        }
        console.log(setJoin, setCreate);
    }

    useEffect(() => {
        if(setJoin === true){
            setIsJoin(true);
            setJoin = false;
        }
        if(setCreate=== true){
            setIsCreate(true);
            setCreate = false;
        }
    },[setJoin, setCreate]);

     return (
        <div>
            {  console.log('IsJoin '+isJoin, 'isCreate '+isCreate) }
            <div className="form flex center">
                <h2 className="formHeading f-white f3m m0-5m">Let's begin</h2>
                <div className="block flex center p1m">
                    
                    <button id="join" className="btn join" onClick={handleClick}>
                        <span className="fp splash splash-learner white-ol">Blending</span>
                        Learner</button>
                    <button id="create" className="btn create" onClick={handleClick}>
                        <span className="fp splash splash-teacher white-ol">Designing</span>
                        Teacher</button>
                </div>
            </div>
            { isJoin && <JoinSign /> }
            { isCreate && <CreateSign /> }
        </div>
    );

}

export default Starter;
use-effect reactjs
1 Answers

There are some problems with your current implementation and I don't think that you actually need to use useEffect hook at all.
A simpler approach would be:

import CreateSign from "./CreateSign";
import JoinSign from "./JoinSign";
import {useState} from 'react';

const JOIN = 'JOIN';
const CREATE = 'CREATE'

const Starter = () => {
    const [mode, setMode] = useState(null);  
  
    const isJoin = mode === JOIN
    const isCreate = mode === CREATE

     return (
        <div>         
            <div className="form flex center">
                <h2 className="formHeading f-white f3m m0-5m">Let's begin</h2>
                <div className="block flex center p1m">
                    
                    <button id="join" className="btn join" onClick={() => setMode(JOIN)}>
                        <span className="fp splash splash-learner white-ol">Blending</span>
                        Learner</button>
                    <button id="create" className="btn create" onClick={() => setMode(CREATE)}>
                        <span className="fp splash splash-teacher white-ol">Designing</span>
                        Teacher</button>
                </div>
            </div>
            { isJoin && <JoinSign /> }
            { isCreate && <CreateSign /> }
        </div>
    );

}

export default Starter;

Also you are using var [setJoin] = useState(null); and then setJoin = false; but this doesn't work, useState returns an array of two elements with a value and a setter function and the only way to modify the state is by using the setter function, when you do setJoin = false; you are actually overwriting the variable without changing the state

user_143268990
Related