Reactjs – State not being updated despite actual changes in value

As per you code, initial state of ageFrom and ageTo is empty and you have added check that filter state filter.state !== '' is not empty then show the button else return null.

As state is always empty string then it always return null so there is no UI on the screen

what you can do inOrder to make it work:

1 – either set some default value to state, or you need to update state in the else part.

2 – you need to pass some parameter in the click function instead of empty.

Note:
as you have added click on span then make sure you are clicking on the span only, click won’t work on button.

I have bit modified code so that you can understand what changes need to do. this code will you give some idea to make necessary changes as per your requirement.

 import React, { useState } from "react";

const App = () => {
const [ageFrom, setAgeFrom] = useState("abc");
const [ageTo, setAgeTo] = useState("def");
const filters = [
  {
    title: "age from",
    value: `${ageFrom} years old`,
    state: ageFrom,
    func: setAgeFrom
  },
  {
    title: "age to",
    value: `${ageTo} years old`,
    state: ageTo,
    func: setAgeTo
  }
];
const handleFilter = () => {
  console.log(ageFrom, ageTo);
  const dataFilter = {
    ageFrom,
    ageTo
  };
};
console.log("filter", filters);
return (
  <>
    {filters.map((filter) => {
      return filter.state !== "" ? (
        <button
          className="flex whitespace-nowrap gap-4 bg-info items-center cursor-pointer border border-primary px-4 w-fit rounded-md"
          key={filter.title}
        >
          <span>
            {filter.title}: {filter.value}
          </span>
          <span>page render</span>
          <span
            className="text-2xl"
            onClick={() => {
              filter.func("klm");
              handleFilter();
            }}
          >
            &times;
          </span>
        </button>
      ) : null;
    })}
  </>
);
};

export default App;