onClick executing a function and setState in react

Question

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 >
);
}

Answer 1

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 >
  );
}

Answer 2

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.

Answer 3

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')} 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>