[FIXED] When i remove the data, a new one appears. How can i make it so it stays empty?

Issue

I created a button that fetch data and place it in a field, i also created a remove button which deletes all the data in the field, but when I press the remove button, it works, but it automatically adds a new one (thats also part of my task, but not like that). If anyone can help me on how to make those fields to remain empty, would much appreciate.

    const fetchapi = async () => {
        try {
          await axios
            .get("https://random-data-api.com/api/v2/addresses")
            .then((response) => {
              setAllData(response.data);
              //console.log(allData);
              //console.log(setAllData);
              console.log(response.data);
            });
        } catch (error) {
          console.log(error);
        }
        //return allData;
      };
      const removeElement = (index) => {
        const newData = fetchapi((_, i) => i !== index);
        setAllData(newData);
      };
      return (
        <Fragment>
          <div>
            <button onClick={fetchapi}>Fetch Location</button>
            {!allData ? null : (
              <div
                style={{
                  backgroundColor: "#c7c7c7",
                  display: "flex",
                  flexDirection: "column",
                  padding: 16,
                  margin: 5,
                  borderRadius: 20
                }}
              >
                <p>
                  <strong>Address: {allData.street_address}</strong>
                </p>
                <p>
                  <strong>City: {allData.city}</strong>
                </p>
                <p>
                  <strong>Street Name: {allData.street_name}</strong>
                </p>
                <p>
                  <strong>Zipcode: {allData.zip_code}</strong>
                </p>
                <button onClick={removeElement}>Botao</button>
              </div>
            )}
          </div>
        </Fragment>

Solution

To make the data remain empty after you press the remove button, you can update your removeElement function to set the value of allData to an empty object or an empty array, depending on what you want the data to be.

to explain this with code, here is an example of how you can update the removeElement function to set the value of allData to an empty object:

const removeElement = () => {
  setAllData({});
};

Also, here's an example of how you can update the removeElement function to set the value of allData to an empty array:

Copy code
const removeElement = () => {
  setAllData([]);
};

With either of these updates, when you press the remove button, the value of allData will be set to an empty object or an empty array, which should prevent the new data from appearing.

Answered By - Muath_01
Answer Checked By - - Willingham (ReactFix Volunteer)