react ternary operator problem, solvable only with jquery?

Question

I'm new to React and try to make a simple crud with Springboot. at certain point I need to use a ternary operator, but it doesn't work. I used it before in React with no problem, I don't understand why now is not working. So I used a function and is working, except when I have to empty a div, which gave me a problem and need to use jquery. So now the code is working, I just would like to know what I'm doing wrong in the ternary and in emptying the div with javascript. I will post the full working code, then just the piece of code that would like to use vs the code that is actually working. Thanks for your patience

import { React, useState, useEffect } from "react";
import { useHistory } from "react-router";
import ServiceUtente from "../service/ServiceUtente";
import $ from "jquery";

const Utente = () => {
  const history = useHistory();
  const [utenti, setUtenti] = useState([]);
  const [isDeleted, setIsDeleted] = useState(false); 
  const [searchBy, setSearchBy] = useState("");
  let checkedNome = false;
  let checkedEmail = false;
  let checkedProfilo = false;

  useEffect(() => {
    retrieveUtenti();
  }, [isDeleted]);

  // retrieve data from db and store it into utenti
  const retrieveUtenti = () => {
    ServiceUtente.utenteGetAll()
      .then((response) => {
        setUtenti(response.data);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  const viewUtente = (id) => {
    history.push(`/view-utente/${id}`);
  };

  const aggiungiUtente = () => {
    history.push("/aggiungi-update-utente/_add");
  };

  const deleteUtente = (id) => {
    ServiceUtente.utenteDelete(id)
      .then((response) => {
        setIsDeleted(!isDeleted);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  const updateUtente = (id) => {
    history.push(`/aggiungi-update-utente/${id}`);
  };

  const handleSearch = (e) => {
    setSearchBy(e.target.value);
  };

  const handleNome = (e) => {
    checkedNome = e.target.checked;
    console.log("nome: " + checkedNome);
    nomeForm();
  };
  const handleEmail = (e) => {
    checkedEmail = e.target.checked;
    console.log("email: " + checkedEmail);
  };
  const handleProfilo = (e) => {
    checkedProfilo = e.target.checked;
    console.log("profilo: " + checkedProfilo);
  };

  const formSearchBy = () => {
    // console.log("");
  };

  const nomeForm = () => {
    if (checkedNome === true) {
      document.getElementById("nomeForm").innerHTML = `
        <input
          type="text"
          className="form-control"
          placeholder="Search Utente"
          value="${searchBy}"
          onChange="${handleSearch}"
        />`;
    } else {
      // document.getElementById("nomeForm").innerHTML = "";
      $("#nomeForm").empty();
    }
  };

  return (
    <div className="row">
      <div className="col-sm-10 offset-1">
        <h2 className="login-title my-4" style={{ textAlign: "center" }}>
          GM Utente
        </h2>

        {/* ***********************SEARCH BAR****************************************** */}
        <form onClick={formSearchBy}>
          <h4 style={{ textAlign: "center" }}>
            Spuntare i campi desiderati per la ricerca
          </h4>
          <div className="form-check">
            <input
              onChange={handleNome}
              className="form-check-input"
              type="checkbox"
              name="nomeCheck"
              value=""
              id="nomeUtente"
            />
            <label className="form-check-label" htmlFor="nomeUtente">
              Nome Utente
            </label>
            <div id="nomeForm">{nomeForm()}</div>
          </div>
          <div
            className="input-group-append my-2 text-center"
            style={{ textAlign: "center" }}
          >
            <button
              className="btn btn-success"
              type="submit"
              id="button-addon2"
            >
              Search
            </button>
          </div>
        </form>
        {/* ***********************END SEARCH BAR*********************************** */}

        <button
          type="button"
          className="btn btn-primary my-2"
          onClick={() => aggiungiUtente()}
        >
          Aggiungi Utente
        </button>
        <table
          className="table table-striped table-bordered"
          style={{ textAlign: "center" }}
        >
          <thead>
            <tr>
              <th>Id Utente</th>
              <th>Nome Utente</th>
              <th>Email</th>
              <th>Password</th>
              <th>Profilo Utente</th>
              <th>Azioni</th>
            </tr>
          </thead>

          <tbody>
            {utenti.map((utente) => (
              <tr key={utente.idUtente}>
                <td>{utente.idUtente}</td>
                <td>{utente.nomeUtente}</td>
                <td>{utente.email}</td>
                <td>{utente.password}</td>
                <td>{utente.profiloUtente.nomeProfilo}</td>
                <td>
                  <button
                    onClick={() => viewUtente(utente.idUtente)}
                    type="button"
                    className="btn btn-secondary mx-1"
                  >
                    Details
                  </button>
                  <button
                    onClick={() => updateUtente(utente.idUtente)}
                    type="button"
                    className="btn btn-warning mx-1"
                  >
                    Update
                  </button>
                  <button
                    onClick={() => deleteUtente(utente.idUtente)}
                    type="button"
                    className="btn btn-danger mx-1"
                  >
                    Delete
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Utente;

All this code is working but I would like to use this

{checkedNome === true ? (
              <input
                type="text"
                className="form-control"
                placeholder="Search Utente"
                value={searchBy}
                onChange={handleSearch}
              />
            ) : null}

Instead of this function

const nomeForm = () => {
    if (checkedNome === true) {
      document.getElementById("nomeForm").innerHTML = `
        <input
          type="text"
          className="form-control"
          placeholder="Search Utente"
          value="${searchBy}"
          onChange="${handleSearch}"
        />`;
    } else {
      // document.getElementById("nomeForm").innerHTML = "";
      $("#nomeForm").empty();
    }
  };

Also, in this function, why the Jquery syntax is working and the '.innerHTML = "";' commented out is not? Thanks

You do not need to use jQuery to achieve what you want. The code with the ternary operator seems fine and should be placed the div with id "nomeForm". What issue do you have when you try that? — Houssam
– Houssam, Commented Oct 19, 2021 at 8:22
"at certain point I need to use a ternary operator, but it doesn't work" Please elaborate on the but it doesn't work part. — Felix Kling
– Felix Kling, Commented Oct 19, 2021 at 8:23
instead of using ternary operator in which you're explicitly returning null use conditonal and operator Example: {checkedNome && <input />} let me know if that works — Varun Arya
– Varun Arya, Commented Oct 19, 2021 at 8:25
if I don't use jQuery I get "TypeError: Cannot set properties of null (setting 'innerHTML')", with document.getElementById("nomeForm").innerHTML = ""; — fax58
– fax58, Commented Oct 19, 2021 at 8:25
Thanks Houssam and Varun, now I will try. Felix Kling, it doesn't work mean that i click the checkbox and nothing happens — fax58
– fax58, Commented Oct 19, 2021 at 8:27

Drew Reese · Accepted Answer · 2021-10-19 08:59:01Z

1

Issue

The issue is that you aren't updating any state in order to trigger a render. checkedNome is declared in the function body and mutating it won't trigger React to do anything.

let checkedNome = false;

const handleNome = (e) => {
  checkedNome = e.target.checked; // <-- mutation
  console.log("nome: " + checkedNome);
  nomeForm(); // <-- DOM mutation
};

Solution

Move the checkedNome into component state:

const [checkedNome, setCheckedNome] = React.useState(false);

Update handleNome to enqueue a state update:

const handleNome = (e) => {
  const { checked } = e.target;
  setCheckedNome(checked);
};

Update the render return to conditionally render the input:

<div id="nomeForm">
  {checkedNome && (
    <input
      type="text"
      className="form-control"
      placeholder="Search Utente"
      value={searchBy}
      onChange={handleSearch}
    />
  )}
</div>

answered Oct 19, 2021 at 8:59

Drew Reese

207k19 gold badges281 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fax58 Over a year ago

Thank you very much, this is working! Just an additional question, why when updating handleNome I need to put const { checked } in curly brackets? Thanks again!

Drew Reese Over a year ago

@fax58 It is destructuring assignment, const { checked } = e.target; is shorthand for const checked = e.target.checked;. You don't need to do this but I think it tends to lead to cleaner code.

Collectives™ on Stack Overflow

react ternary operator problem, solvable only with jquery?

1 Answer 1

Issue

Solution

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related