Изменение состояния противоположного реагирующего компонента

У меня есть простой компонент формы входа, который, когда я нажимаю, хотел бы, чтобы форма исчезла и отображала только мой json. Я немного устарел от работы с состоянием реакции и, похоже, имею эффект, противоположный тому, что я пытаюсь. Когда я нажимаю на свое событие кнопки, json, который я показываю, будет переключаться между появлением и исчезновением, но форма остается статичной. Мне нужно, чтобы форма исчезла, а на странице появилась моя сетка.

Вот мои компоненты index.jsx

import React from 'react';
import SignUp from '../SignUp';
import Cards from '../Articles/Cards';

export default class Gecko extends React.Component {
    constructor(props) {
        super(props);
        this.state = { requestedPostsThatWeGotFromGecko: null,  }
        this.clickMe = this.clickMe.bind(this)
  }

    
    clickMe = () => {
        const {requestedPostsThatWeGotFromGecko} = this.state;
        this.setState({ requestedPostsThatWeGotFromGecko: !requestedPostsThatWeGotFromGecko })
    }
    render() {
        console.log(this.state);
        return (
            <div className='gecko'>
                <SignUp login={() => this.clickMe()}/>
                {this.state.requestedPostsThatWeGotFromGecko &&
                    <Cards />
                }
            </div>
        );
    }
}

Компонент регистрации

import React from 'react';

export default class SignUp extends React.Component {

    render() {
        const onClick = () => {
            this.props.login();
            console.log('rich');
        }
        return (
            <div className='sign-up'>
                <table className='sign-up-form'>
                    <tbody>
                    <div class="gecko-signup__tabs"><button id="gecko-signup" data-selected="yes">Sign Up</button><button id="gecko-login" data-selected="">Log In</button></div>
                        <tr>
                            <td>
                                <p id="signUpFree">Sign Up for Free</p>
                            </td>
                        </tr>
                        <div id="inputs-section">
                            <tr>
                                <td><input id="first" placeholder="First Name*" /></td>
                                <td><input id="last" placeholder="Last Name*" /></td>
                            </tr>
                        </div>
                        <tr>
                            <td colSpan="2"><input placeholder="Email Address*" /></td>
                        </tr>
                        <tr>
                            <td colSpan="2"><input placeholder="Set A Password*" /></td>
                        </tr>
                        <tr>
                            <td colSpan="2"><input id="getStarted" type="submit" value="Get Started" onClick={onClick}/></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        );
    }
}

Компонент CardSetup

import React from 'react';
import SignUp from '../SignUp';


export default class Articles extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            requestedPostsThatWeGotFromGecko: [],
        }
    }
    
    componentDidMount(){
        const api = 'https://5d445466d823c30014771642.mockapi.io/api/v1/products';
        const request = new Request(api);
        // Fetch isn't browser compatible...Might should fix.
        fetch(request)
            .then(response => {
                if (response.status === 200) {
                    return response.json();
                } else {
                    throw new Error('Something went wrong on api server!');
                };
            }).then(response => {
                 
                this.setState({
                    requestedPostsThatWeGotFromGecko: response
                });
                
            })
            .catch(error => {
                console.error(error);
            });
    }

    render() {
        return(
            <div className='articles'>
                
                {this.state.requestedPostsThatWeGotFromGecko.map(product => {
                    return (
                        <div className='flex-grid'>
                            <div className="card">
                                    <div className="overflow">
                                        <img className='productImage' src={product.image}></img>
                                    </div>
                                    <div className='card-body'>
                                        <p id='name'>{product.name}</p>
                                        <p id='description'>{product.description}</p>
                                        <p id='price'>{product.price} </p>
                                    </div>
                            
                            </div>
                        </div>
    );
    })
}
</div>
        )}}

Компонент Final Cards

import React from 'react';
import Articles from './CardSetup';

export default class Cards extends React.Component {

    render() {
        return(
            
            <div className="cards">
                <h2>Products</h2>
                    <div className="column">
                        <Articles />
                    </div>
                    <div className="column">
                        <Articles />
                    </div>
                    <div className="column">
                        <Articles />
                    </div>
                    <div className="column">
                        <Articles />
                </div>
            </div>
        );
    }
}

Я почти уверен, что я неправильно устанавливаю состояние где-то в строке после нажатия кнопки. Я думаю о jquery и хочу «скрыть» элемент, но знаю, что с реакцией это неправильно. Любая помощь приветствуется.