most concise way to pass props to a react component?

user_39939 0
Viewed 119

here is my react hooks code.

function onClick(){
  alert('clicked')
}
var className='clicker'
function Clicker1(){
  return <div {...{onClick,className}}>clicker 1</div>
}
function Clicker2(){
  var props={onClick,className}
  return <div {...props}>clicker 2</div>
}
function Clicker3(){
  return <div className={className} onClick={onClick}>clicker 3</div>
}
function Clickers(){
  return <><Clicker1/><Clicker2/><Clicker3/></>
}
ReactDOM.render(<Clickers/>,document.getElementById('root'));

It demonstrates three different styles of passing props to a component. They all work just fine. My favorite style is clicker 1.

my question is: is there a more concise way to pass the props?

edit: this question is not option-based, its about concise representation, which can be accurately measured in number of characters, no option needed

jsx reactjs javascript
2 Answers
user_399390

yes, you are following the correct path.

When there are multiple developers working on a single project, sometimes it becomes very confusing which and all props are getting passed and used in the component. It can lead to the breaking of the application or lack of info on the website.

with the first approach, you can actually see which props are getting passed and used.

<Button
  fluid
  className={BEM_name}
  category={category}
  asButton={asButton}
  outline={outline}
  asLink={asLink}
  asAnchor={asAnchor}
  href={href}
  clickHandler={clickHandler}
  dataAutoId={dataAutoId}
>

user_101180500
Related