How to display different component after button click using React-Hooks?

Question

I have a simple CRUD application now. I want my application to be able to modify and delete after a search. Meaning that the user have to search for the item, then only can modify or delete it. I have the search function ready and worked, however I'm struggle with display the Modification Form after the Modify button clicked.

I have tried searching around the internets and read about using states to toggle however I'm using React-Hooks and I have no idea how to implement that to useState .

Here is my current code, I tried to testing with a button within the modifyForm but it won't show up after I click Modify button. However, the modifyBtn and deleteBtn show up perfectly.

import React, {useState} from 'react'
import {useQuery, useMutation} from 'react-apollo-hooks';
import {searchUserQ, editUserQ, deleteUserQ} from '../queries/queries';

let cycle = 0;

const SearchUserForm = () => {
    //Search User Query
    const [name, setName] = useState('');
    const { data, error, loading } = useQuery(searchUserQ, {
        variables: { name }
    });

    let content;
    let sName;
    let modifyBtn, deleteBtn;
    let modifyForm, deleteForm;

    //If no user was found
    if (cycle > 0){
        if (data.user === null) { content = 'User Not Found' };
    }

    //If user was found
    if (data.user !== undefined && data.user !== null) {
        if (loading) { content = 'Loading User...' };

        if (error) { content = `Error Occur: ${error}` };

        const user = data.user;
        content = `Username: ${ user.name }    ID: ${ user.id }`;

        //Display Modify Button and Delete Button after search result
        modifyBtn = <button onClick={ (event) => {
            event.preventDefault();
            //Display Modify Form
            modifyForm = <button>Log</button>;
        }}>Modify</button>;
        deleteBtn = <button>Delete</button>;
    }

    //Return On Front End
    return (
        <div id="edit-user">
            <div className="field">
                <label htmlFor="name">Search UserName</label>
                <input type="text" id="name" onChange={(event) => {
                    sName = event.target.value;
                }}/>
                <button onClick={(event) => {
                    setName(sName);
                    cycle++;
                }} value={name}>
                    Search
                </button>
            </div>
            <div>
                <p>{ content }</p>
            </div>
            <div>
                { modifyBtn }
                { deleteBtn }
            </div>
            <div>
                { modifyForm }
            </div>
            <div>
                { deleteForm }
            </div>
        </div>
    )

};

export default SearchUserForm;

I have no idea why it won't show up in the modifyForm because it did not return any error. Or am I doing the entire thing wrong? It should be in another way? Please help, thanks and deeply appreciates the reads :)

Answer 1

You are missing a closing tag on the modify button and the closing }} on your onClick event.

//Display Modify Button and Delete Button after search result
        modifyBtn = <button onClick={ (event) => {
            event.preventDefault();
             }}> Button </button>  // <-- correct place closing tags here.

            //Display Modify Form
        modifyForm = <button>Log</button>;
        deleteBtn = <button>Delete</button>;

EDIT: Yes, there it is below. However, it was in the wrong place as you had the modifyForm variable inside the modifyBtn variable. It needs to be above. If you want to have the <button>Log</button> inside the modifyBtn that can be done but it wasn't valid as it was.