React / Functional component / Conditional render on callback / Not Working

Question

Why this does not work ?

import React from 'react';

function Room() {
    let check = null;

    const ibegyouwork = () => {
        check = <button>New button</button>;
    } 

    return (
        <div>
            <button onClick={ibegyouwork}>Display my button now !!!!</button>    
            {check}
        </div>
    );
}

export default Room;

And this works fine ?

import React from 'react';

function Room() {
    let check = null;

    return (
        <div>
            <button>No need for this button because in this case the second button is auto-displayed</button>    
            {check}
        </div>
    );
}

export default Room;

Basically I try to render a component based on a condition. This is a very basic example. But what I have is very similar. If you wonder why I need to update the check variable inside that function is because in my example I have a callback function there where I receive an ID which I need to use in that new component.

The example that I provided to you is basically a button and I want to show another one when I press on this one. I am new to React and despite I searched in the past 2 hours for a solution I couldn't find anything to address this issue.

Any tips are highly appreciated !

reactjs.org/docs/state-and-lifecycle.html ;)

user5734311
– user5734311

2020-12-19 18:22:16 +00:00
Commented Dec 19, 2020 at 18:22 — user5734311
– user5734311, Commented Dec 19, 2020 at 18:22
Using state is the core mechanism of React :)

user5734311
– user5734311

2020-12-19 19:43:46 +00:00
Commented Dec 19, 2020 at 19:43 — user5734311
– user5734311, Commented Dec 19, 2020 at 19:43

Dean James · Accepted Answer · 2020-12-03 00:02:46Z

2

Your component has no idea that something has changed when you click the button. You will need to use state in order to inform React that a rerender is required:

import React, {useState} from 'react'

function Room() {
    const [check, setCheck] = useState(null);

    const ibegyouwork = () => {
        setCheck(<button>New button</button>);
    } 

    return (
        <div>
            <button onClick={ibegyouwork}>Display my button now !!!!</button>
            {check}
        </div>
    );
}

export default Room;

When you call setCheck, React basically decides that a rerender is required, and updates the view.

answered Dec 3, 2020 at 0:02

Dean James

2,6434 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shimi · Accepted Answer · 2020-12-03 00:03:55Z

1

The latter is working because there are no changes to the check value that should appear on the DOM. If check changes should impact and trigger the React render function, you would want to use a state for show/hide condition.

import React from 'react';

const Check = () => <button>New button</button>;

function Room() {
    const [show, setShow] = React.useState(false);

    const ibegyouwork = () => {
        setShow(true);
    } 

    return (
        <div>
            <button onClick={ibegyouwork}>Display my button now !!!!</button>    
            {show && <Check />}
        </div>
    );
}

export default Room;

answered Dec 3, 2020 at 0:03

Shimi

1,2189 silver badges18 bronze badges

Collectives™ on Stack Overflow

React / Functional component / Conditional render on callback / Not Working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related