How To Use Button In React

Buttons In React

Buttons play a vital role in building interactive and smooth applications with React. It’s useful for actions such as submitting forms, triggering specific events (like opening a pop-up), or navigating within the app.

We can make our app user-friendly using buttons and easily handle user clicks and input.

Also, can create a dynamic interaction to show and hide buttons and apply custom styles to match our design.

How To Create Button In React?

In React, we will create a button using a normal <button> tag, but inside we write JSX syntax for making it dynamic.

Code Example:

import React from 'react';

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

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

export default App;

The <App> function is a functional component. Inside it, we define a simple handleClick() function. When the user clicks on the button, the handleClick() function runs and shows an alert message “Button clicked!”

Inline Styling in React Buttons

In React, inline styling is written in JavaScript objects, and the style properties are camel-cased. we can directly apply an inline style to the elements.

Here is the simple inline styling code for the button:

import React from 'react';

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

export default App;

Conditional Rendering for Buttons

Conditional rendering means you can create buttons based on a specific condition. like displaying a different button for a different purpose.

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;

How this code works:

First, we create a “loggedIn” state variable using the useState(false) function. This is tracking whether the user is currently logged in or not.

Whenever the button is clicked, the “toggleLogin” flips the value of “loggedIn“, making true into false, and false into true.

We use a ternary operator (? :), so if the loggedIn function is false, it shows a “login” button, and if the loggedIn function is true, it shows a logout button.

Button with Custom Component and Props

This functionality makes your button reusable in React. You can use the same CustomButton component in many places and pass different text, styles and actions without writing extra button code.

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;

How this code work:

We use <CustomButton /> component and give it three things:

• style={{ backgroundColor: ‘green’, color: ‘white’ }} => This style is making a green background and white text of our button.
• label=”Click Me” => This text will appear on the button.
• onClick={handleClick} => This function simply tells the button what to do when the button is clicked?

You don’t need to write a new <button> again and again. Just use <CustomButton /> and pass the values.

How To Submit Forms Using Buttons?

React buttons can be used for form submission in our app, and we can also add custom validation before the submission.

You can use this code logic in your React project:

import React, { useState } from 'react';

function NameForm() {
  const [userName, setUserName] = useState('');

  const submitForm = (e) => {
    e.preventDefault(); // prevent page reload
    if (userName.trim() === '') {
      alert('Please enter your name before submitting the form.');
    } else {
      alert(`Thanks, ${userName}, your form has been submitted!`);
    }
  };

  const updateInput = (e) => {
    setUserName(e.target.value);
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial' }}>
      <h2>Student Info Form</h2>
      <form onSubmit={submitForm}>
        <input
          type="text"
          value={userName}
          onChange={updateInput}
          placeholder="Type your full name"
          style={{ padding: '8px', marginRight: '10px' }}
        />
        <button type="submit" style={{ padding: '8px 16px' }}>
          Send
        </button>
      </form>
    </div>
  );
}

export default NameForm;