CODEWITHSUNDEEP
reactjstypescript
Susssshi
Susssshi

Reputation: 33

Neater way to write this JSX?

If I have some function that will be called for both these functions of SomeForm i.e. onGoClick and onNoGoClicked both have the same function call, is there a way I can tidy this up more? Or is this acceptable?

      <SomeForm
        onGoClick={() => {
          cleanupHere(props)
        }}
        onNoGoClicked={() => {
          cleanupHere(props)
        }}
      />

Upvotes: 0

Views: 42

Answers (2)

Tejal
Tejal

Reputation: 471

One of the way if you have so many props to pass,

let someFormProps = {}; 
someFormProps.onGoClick = someFormProps.onNoGoClicked = cleanupHere(props);
<SomeForm {...someFormProps} />

Upvotes: 1

Dillan Wilding
Dillan Wilding

Reputation: 1111

There's not much I can suggest without knowing the context in which you are using this and the implementation of SomeForm. This isn't ideal but since onGoClick and onNoGoClick are executing the same function you could combine them with a predefined function like this:

const func = () => {
  cleanupHere(props)
}
// ...
return <SomeForm onGoClick={func} onNoGoClick={func} />

Upvotes: 2

Related Questions