onClick executing a function and setState in react-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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.
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.
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>