Button In React

In React, buttons are a core part of user interactions, allowing users to perform actions like submitting forms, triggering events, or navigating through content.

Understanding how to create and style buttons effectively in React is essential for building interactive applications. React offers different ways to create and manage buttons, including event handling, conditional rendering and custom styling.

Basics of Button Creation in React

In React, buttons are created using the HTML element, but with JSX syntax. JSX allows us to embed JavaScript expressions within HTML, making it easy to pass event handlers, conditionally render buttons and manage their behavior in a component-oriented way.

Here’s an example of a simple button in React:

import React from 'react';

function App() {
const handleClick = () => {
alert('Button clicked!');
};

return (
<div>
<button onClick={handleClick}>Click Me</button>
</div>
);
}

export default App;

In this example:

  • The button is rendered inside a functional component called App.
  • The onClick event is attached to the button to handle click actions, calling the handleClick function, which triggers an alert when clicked.

Button with Inline Styling in React

React allows you to apply inline styles directly to elements. Inline styles are written as JavaScript objects, where the style properties are camelCased.

import React from 'react';

function App() {
return (
<button style={{ backgroundColor: 'blue', color: 'white', padding: '10px 20px', borderRadius: '5px' }}>
Styled Button
</button>
);
}

export default App;

In this example:

  • The style prop is used to apply inline styling to the button.
  • Styles are added in a JavaScript object, and each property is camelCased.

Conditional Rendering for Buttons

You may need to render buttons conditionally based on a specific condition, like displaying a different button when a user is logged in versus logged out.

import React, { useState } from 'react';

function App() {
const [loggedIn, setLoggedIn] = useState(false);

const toggleLogin = () => setLoggedIn(!loggedIn);

return (
<div>
{loggedIn ? (
<button onClick={toggleLogin}>Logout</button>
) : (
<button onClick={toggleLogin}>Login</button>
)}
</div>
);
}

export default App;

In this example:

  • The loggedIn state determines which button to display.
  • The button text changes between “Login” and “Logout” based on the loggedIn state, managed by the toggleLogin function.

Button with Custom Component and Props

For reusable buttons, create a custom Button component that accepts props for text, styling and actions. This makes your button flexible and reusable across different parts of the app.

import React from 'react';

function CustomButton({ label, onClick, style }) {
return (
<button onClick={onClick} style={style}>
{label}
</button>
);
}

function App() {
const handleClick = () => alert('Custom button clicked!');

return (
<div>
<CustomButton label="Click Me" onClick={handleClick} style={{ backgroundColor: 'green', color: 'white' }} />
</div>
);
}

export default App;

In this example:

  • CustomButton is a reusable button component that accepts label, onClick, and style props, making it adaptable to various use cases.
  • The App component passes different values to CustomButton, controlling its label, click behavior, and style.

Using Buttons for Form Submission

React buttons can be used to submit forms, either by setting the type attribute to “submit” or by adding custom validation before submission.

import React, { useState } from 'react';

function Form() {
const [name, setName] = useState('');

const handleSubmit = (event) => {
event.preventDefault();
alert(`Form submitted with name: ${name}`);
};

return (
<form onSubmit={handleSubmit}>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" />
<button type="submit">Submit</button>
</form>
);
}

export default Form;

In this example:

  • A form with an input field and a submit button is created.
  • When the button is clicked, handleSubmit is called, which prevents the default form submission and displays an alert with the entered name.

Styling React Buttons with CSS Classes

You can also use CSS classes to style buttons, allowing for a more consistent and reusable approach across your application.

import React from 'react';
import './Button.css'; // Import CSS file

function App() {
return (
<button className="primary-button">Styled Button</button>
);
}

export default App;

Button.css:

.primary-button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}

In this example:

  • The primary-button class is applied to the button, with styles defined in a separate CSS file.
  • This approach allows you to reuse the primary-button class wherever similar styling is required.

Button Disabled State

Buttons often need a disabled state, which can be added by setting the disabled attribute conditionally based on a state.

import React, { useState } from 'react';

function App() {
const [isDisabled, setIsDisabled] = useState(true);

return (
<div>
<button disabled={isDisabled}>Submit</button>
<button onClick={() => setIsDisabled(!isDisabled)}>
{isDisabled ? 'Enable' : 'Disable'} Submit Button
</button>
</div>
);
}

export default App;

Leave a Comment