How it works? Hooks

[Valeria06]

Hello guys! I’m a beginner in programming and just started learning React and I have this code.

let [contactList, setContacts] = useState(contacts);
const [checkedMale, setCheckedMale] = useState(false);
const [checkedFemale, setCheckedFemale] = useState(false);
let [search, setSearch] = useState("");

function searchBox(event) {
    setSearch(event.target.value);
  }
  useEffect(() => {
    setContacts(
      contacts
        .map((el) => {
          if (
            Object.values(el).filter((val) =>
              val.toLowerCase().includes(search)
            ).length > 0
          ) {
            if ((checkedFem && el.gender === "female") || !el.gender) {
              return el;
            }
            if ((checkedMale && el.gender === "male") || !el.gender) {
              return el;
            }
          }
        })
        .filter((val) => val !== undefined)
    );
  }, [search, checkedFem, checkedMale]);
return (
    <div>
      <div className="navigation">
        <input className="searcInp" onChange={searchBox}></input>
        <div className="checkedRender">
          <input
            type="checkbox"
            value={checkedMale}
            onChange={() => setCheckedMale((checkedMale) => !checkedMale)}
          />
          {checkedMale ? "Male" : "notMale"}
          <input
            type="checkbox"
            value={checkedFemale}
            onChange={() => setCheckedFemale((checkedFemale) => !checkedFemale)}
          />
          {checkedFemale ? "female" : "notFemale"}
        </div>
      </div>
      <div>
        {contactList.map((element, i) => {
          return <Contract data={element} key={i} />;
        })}
      </div>
    </div>
  );
;

export default Contracts;

Could you help me and explain ? How it works? I’ll be very happy) Thanks)

[admit8490]

@Valeria06

just started learning React

Do you have any experience with React?
If not, explanation will involve introducing
useState hook

Using the State Hook – React

useEffect hook

Using the Effect Hook – React

Also, fundamental things like JSX syntax extension

Introducing JSX – React

and components

Components and Props – React

The code you posted looks like a component and part of some bigger react application.

I would suggest you to elaborate a bit more about your react/js experience and/or provide more specific questions about this code or react in general.
When answering your current question(‘how it works’) it is not clear where to even begin explanation and how thorough explanation should be.

[JeremyLT]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').