How to Fetch the Data on Button Click using React Hooks

Question

I want to display the Child component on click on Button, But here I am getting the Data when the page loads,I need to write a condition like when Button Clicked , then only the Child component show display otherwise a default text should display there.

const DetailsCard = () => {

    const [employee, setemployee] = useState([])
    const [data, setData] = useState()

    useEffect(() => {
        fetch("http://localhost:3000/users").then(res => res.json()).then((result) => {
            setemployee(result);
        }, [])
    })

    const handleChange = () => {

        setData(true);

    }

    return (
        <div>
            <h1>LordShiva</h1>
            <div className="container">
                <div className="row">
                    <div className="col">
                        <div className="card">
                            <div className="card-header bg-primary text-white">
                                <p className="h4">Birthday APP</p>
                                <button className="btn btn-red true1 " onClick={handleChange} >HappyBirthday</button>
                            </div>
                            <div className="card-body">
                                <TableCard data={employee} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default DetailsCard;

Kasi · Accepted Answer · 2020-10-10 07:02:18Z

const DetailsCard = () => {
  const [employee, setemployee] = useState([]);
  const [showChild, toggleShowChild] = useState(false);

  useEffect(() => {
    fetch("http://localhost:3000/users")
      .then((res) => res.json())
      .then((result) => {
        setemployee(result);
      }, []);
  });

  const handleChange = () => {
    toggleShowChild(!showChild);
  };

  return (
    <div>
      <h1>LordShiva</h1>
      <div className="container">
        <div className="row">
          <div className="col">
            <div className="card">
              <div className="card-header bg-primary text-white">
                <p className="h4">Birthday APP</p>
                <button className="btn btn-red true1 " onClick={handleChange}>
                  HappyBirthday
                </button>
              </div>

              {/* Only show child when `showChild` is true. */}
              {showChild && (
                <div className="card-body">
                  <TableCard data={employee} />
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DetailsCard;

Codesandbox

Shilpa Mishra · Accepted Answer · 2022-06-27 15:11:41Z

0

import React, { useState, useEffect } from "react";

const FetchAPI = () => {
  const [data, setData] = useState([]);
  const newData = data.slice(0, 12);
  const [showData, setShowData] = useState(false);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => response.json())
      // .then((json) => console.log(json));
      .then((json) => setData(json));
  }, []);

  const onClickhandler = () => {
    setShowData(!showData);
  };
  return (
    <>
      <h1>Search</h1>
      <ul>
        {newData.map((item) => {
          return showData ? (
            <li style={{ listStyle: "none", marginTop: "10px" }} key={item.id}>
              {item.title}
            </li>
          ) : (
            ""
          );
        })}
      </ul>
      <button onClick = {onClickhandler}>
        Fetch
      </button>
    </>
  );
};

export default FetchAPI;

answered Jun 27, 2022 at 15:11

Shilpa Mishra

11 bronze badge

2 Comments

Shilpa Mishra Over a year ago

codesandbox.io/s/cool-waterfall-k3ymfz?file=/src/test.js:0-918

Ricardo Dias Morais Over a year ago

A code-only answer is not high quality. While this code may be useful, you can improve it by saying why it works, how it works, when it should be used, and what its limitations are. Please edit your answer to include explanation and link to relevant documentation.

Collectives™ on Stack Overflow

How to Fetch the Data on Button Click using React Hooks

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related