Ask Your Question
2

How can I utilize the export default function to construct buttons in react version 16?

asked 2021-10-09 11:00:00 +0000

scrum gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
3

answered 2021-07-16 15:00:00 +0000

lakamha gravatar image

You can utilize the export default function to construct buttons in React version 16 by creating a Button component and exporting it as the default export. Here's an example:

import React from 'react';

const Button = (props) => {
  const { onClick, text } = props;

  return (
    <button onClick={onClick}>{text}</button>
  );
}

export default Button;

In this example, the Button component accepts two props: onClick and text. It renders a button with the provided text and attaches the onClick event handler.

Now, in your main file, you can import the Button component and use it like this:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './Button';

ReactDOM.render(
  <Button onClick={() => console.log('Button clicked!')} text="Click me!" />,
  document.getElementById('root')
);

This will render the Button component with the text "Click me!" and attach a click event handler that logs "Button clicked!" to the console.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2021-10-09 11:00:00 +0000

Seen: 12 times

Last updated: Jul 16 '21