Question

Using the React Js / bootstrap below how would you change the background color for this specific page alone. (tried using css but only changes the color of the specific div not the entire page)

import React from 'react';

import ReactDOM from "react-dom";

import Layout from '../core/Layout';

import "./searchbar.css"

const people = [

    "Artificial Intelligence",

    "Machine learning",

    "Blockchain",

    "Internet",

    "Robotics",

    "Cloud Computing",

    "Internet of Things",

    "5G",

    "Augmented Reality",

    "Virtual Reality",

  ];

function Search() {

    //searching function

      const [searchTerm, setSearchTerm] = React.useState("");

      const [searchResults, setSearchResults] = React.useState([]);

      const handleChange = e => {

        setSearchTerm(e.target.value);

      };

      React.useEffect(() => {

        const results = people.filter(person =>

          person.toLowerCase().includes(searchTerm)

        );

        setSearchResults(results);

      }, [searchTerm]);

     

     

      return (

        <div className="row">

        <div className="col-6" style={{ backgroundColor: "white", color:"black"}}>

          <input classname= 'Searchbar'

            type="text"

            placeholder="Search"

            value={searchTerm}

            onChange={handleChange}

          />

          <ul>

            {searchResults.map(item => (

              <li>{item}</li>

            ))}

          </ul>

        </div>

        </div>

        

      );

    }

    

    const rootElement = document.getElementById("root");

    ReactDOM.render(<Search />, rootElement);

export default Search;

Answer 1

Please try encapsulating the html code within a common container and div tag and then try changing the background color.

<div class="container" style="background-color: coral;">

<div className="row">

        <div className="col-6" style={{ backgroundColor: "white", color:"black"}}>

          <input classname= 'Searchbar'

            type="text"

            placeholder="Search"

            value={searchTerm}

            onChange={handleChange}

          />

          <ul>

            {searchResults.map(item => (

              <li>{item}</li>

            ))}

          </ul>

        </div>

        </div>

Incase there is some other operation you are trying to do please specify that.