How to useimage and input copmonent in ReactJS

We can use the image before the text input field and use the css for margin and alignment to show the user image along with the input field in react.

Example: Using image before input component and styling using css for the required output.

Javascript

    // Filename - App.js
 
    import "./App.css";
    import { useState } from "react";
 
    function App() {
        const [inputValue, setInputValue] = useState("");
        const userIcon =
"https://media.w3wiki.org/wp-content/uploads/20200716222246/Path-219.png";
 
        const handleChange = (e) => {
            setInputValue(e.target.value);
        };
 
        return (
            <div className="App">
                <h1 className="geeks">w3wiki</h1>
                <h3>
                    React Example for User icon with the input
                    field
                </h3>
                <div className="container">
                    <img
                        src={userIcon}
                        alt="User"
                        className="user-img"
                    />
                    <input
                        type="text"
                        placeholder="Enter your username"
                        value={inputValue}
                        onChange={handleChange}
                        className="input"
                    />
                </div>
            </div>
        );
    }
 
    export default App;

CSS

/* Filename - App.css */
 
.App {
    text-align: center;
    margin: auto;
    width: 50rem;
}
 
.geeks {
    color: green;
}
 
.container {
    display: flex;
    align-items: center;
    text-align: center;
    margin: auto;
    width: 17rem;
}
 
 
.user-img {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 15px;
}
 
.input {
    padding: 8px;
    font-size: 16px;
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output

How to show user image along with input field in ReactJS?

We can show the user image along with the input field in React JS. It is like adding an icon image inside the input field. This feature can also be seen on many website login screens. Material UI for React has this component available for us and it is very easy to integrate. We can use the InputAdornment Component in ReactJS using the following approach.