Is there a way to dynamically change the background image of a website based on user input? I want the background image to update to reflect specific keywords entered by the user. For example, if the user types in "New York", "New York City", or "NYC", then the background image should change to a picture of NYC.
Currently, I have a div element with a designated class, and in my CSS file, the background image is set using a URL from the internet. While I understand that you can import a file to use as a background image inline within a .jsx file, this seems like a cumbersome process, especially since I have numerous images that need to be rendered based on user input. Without relying on jQuery (as it may not integrate well with React), how can I achieve dynamic background image changes for a div based on user input?
function App() {
const [name, setName] = useState('');
const [headingText, setHeadingText] = useState('City');
function handleChange(event){
setName(event.target.value);
}
function handleKeyDown(event){
if(event.key === 'Enter'){
setHeadingText(name);
}
}
return (
<div className="App">
<header className="App-header">
<input value={name} onKeyDown={handleKeyDown} onChange={handleChange} type="search" placeholder="Search for a city"></input>
</header>
</div>
);
}