Discussion on: Build Your First Reusable Components Using React

View post

Replies for: Why the onClick is renamed in handeClick? Also it's missing all the standard props of a button...

I didn't really rename it, I just pass __callbacks as props_ for the onClick event , in our case the callback is handeClick.

But feel free to do it like this :

//reusable 
export function Button(props){
  return <button onClick={props.onClick}>
    {props.label}
  </button>
} 
//app
 export default function App(){
   function onClick(){
     alert("Hell yeees")
   }
    return <Button onClick={onClick} label=" fuck the police"/>
  }

Play with the code right here
Also it's missing all the standard props of a button... ? Really Can you please Elaborate 🤖

Alfredo Salzillo • Apr 25 '21

If I need to pass the name attribute? And others a11y attributes? And others html button attributes? Or if I need to add a custom width?
The title of the article is "Build your first reusable components" bit this Button is not reusable. It's opinionated and can be used only in specific case, without the possibility to adapt it.
But most importantly you are missing all the a11y attributes.
The name of the article should be "create and use your first component".

Dimer Bwimba • Apr 25 '21 • Edited

haha bruh , I said " first " , " first " , it's a starting point , again feel free to add more functionalities... for other use cases but keep it clean tho . And Yes It's reusable .

dev-to-uploads.s3.amazonaws.com/up...