Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

100
Vistas
onClick executing a function and setState in react

I am stuck with this one function, I have an onClick that when a user clicks on it, it has to perform two things based on the If statement, one function and one state, but it doesnt seem to work:

in my code i want the row when it is Not disabled to do “doScore” as well as “rolling : true” but I don't know how to write it that it works

function RuleRow({ doScore, name, score, description, rolling }) {
const disabled = score !== undefined;

  return (
<tr
  className={`RuleRow RuleRow-${disabled ? "disabled" : "active"}`}
  onClick={disabled ? null : doScore}
>
  <td className="RuleRow-name">{name}</td>
  <td className="RuleRow-score">{disabled ? score : description}</td>
</tr >
);
}
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

  1. specify please what is rolling prop (which values can be passed as rolling) and how it should impact on RuleRow component. For now I see no mention of rolling inside component.
  2. As you can see from snippet below, your function doScore will run on onClick if score not strictly equal to undefined. So either score is equal undefined, or doScore is invalid function or is not function at all. So I suppose there are something with doScore. Provide please what you pass in this prop.
  3. If you want update state of component which is parent of RuleRow component. You should write smth like const [score, setScore] = useState('initial score'). Paste setScore to RuleRow as prop. And then inside RuleRow write onClick={disabled ? null : () => setScore('anything what you want')}. score inside parent component will be updated and RuleRow will be rerendered.

function App() {
  const score = undefined;
  const disabled = score !== undefined;

  console.log('value of disabled id ', disabled);

  return (
    <table className="App">
      <tr onClick={disabled ? null : () => console.log("clicked")}>Hello, click me!</tr>
    </table>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App />,
  rootElement
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

function RuleRow({ doScore, name, score, description, rolling }) {
  const disabled = score !== undefined;

  const handleClick = () => {
      if (score !== undefined && rolling) {
          // do something
      } else {
          doScore();
      }
  };

  return (
    <tr
      className={`RuleRow RuleRow-${disabled ? "disabled" : "active"}`}
      onClick={handleClick}
    >
      <td className="RuleRow-name">{name}</td>
      <td className="RuleRow-score">{disabled ? score : description}</td>
    </tr >
  );
}
about 4 years ago · Juan Pablo Isaza Denunciar

0

This isn't the cleanest solution but you could use an arrow function that has null if disabled or else a function body that calls two functions:

onClick={disabled ? null : (evt) => { doScore(evt); this.setState({ rolling: true }); }}

Recommended way to go would be to create a custom function that calls both functions or just set state rolling: true in the doScore function if possible.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda