How I can build dynamic button in reactjs - reactjs

Question

I'm new to react and I would like to build a dynamic button, I wrote this code but I don't know How I can pass text, style, and size to this button.
import "./button.css";
import React from "react";
const Button = ({
type,
onClick,
buttonStyle,
buttonSize,
}) => {
return (
<div>
<div>
<button
type={type}
onClick={onClick}
buttonStyle={buttonStyle}
buttonSize={buttonSize}
></button>
</div>
</div>
);
};
export default Button;

Answer 1

In React, html elements does not have buttonStyle and buttonSize attribute. The onClick attribute and the type attribute are valid.
You also need to pass in a props parameter in your Button Const Button(props) and add a style attribute which will contain your style declarations in key:value pair.
Also in order to be dynamic, your button should have a label. you can achieve this by adding props.buttonLabel
Your code should be similar to this code below:
import "./button.css";
import React from "react";
const Button = (props) => {
return(
<div>
<div>
<button
type={props.type}
onClick={props.onClick}
style={props.buttonStyle}
>
{props.buttonLabel}
</button>
</div>
</div>
);
};
export default Button;

Answer 2

I think I found the solution...
import "./button.css";
import React from "react";
const Button = ({ parentClassName, buttonLabel, type, onClick }) => {
return (
<div>
<div>
<button className={parentClassName} type={type} onClick={onClick}>
{buttonLabel}
</button>
</div>
</div>
);
};
export default Button;
ReactDOM.render(
<React.StrictMode>
<Button
type="button"
onClick={() => console.log("you clicked me")}
buttonLabel="Bye Now"
parentClassName="btn btn-secondary"
/>
</React.StrictMode>,
document.getElementById("root")
);
Blockquote