To create a button in React that changes the font-weight of the text in a new input to bold, you can follow these steps:

  1. Set up a React component that includes a text input and a button.

  2. Use state to keep track of the font-weight style.

  3. Add an event handler to the button that toggles the font-weight style between "normal" and "bold" when clicked.

Here's a sample implementation:

import React, { useState } from 'react'; const FontWeightButton = () => { const [fontWeight, setFontWeight] = useState('normal'); const handleButtonClick = () => { setFontWeight((prevFontWeight) => (prevFontWeight === 'normal' ? 'bold' : 'normal')); }; return ( <div> <input type="text" style={{ fontWeight }} /> <button onClick={handleButtonClick}>Toggle Bold</button> </div> ); }; export default FontWeightButton;

In this example, we use the useState hook to create a state variable called fontWeight, which defaults to "normal". The text input is styled with the fontWeight state value, so it initially appears with normal font weight.

The button has an onClick event handler called handleButtonClick, which is triggered when the button is clicked. The handleButtonClick function uses the setFontWeight function to toggle the fontWeight state between "normal" and "bold".

When you click the button, the font weight of the text inside the input will change between normal and bold each time the button is clicked.

You can place the FontWeightButton component wherever you need to use this functionality in your React application.

Have questions or queries?
Get in Touch