बैकग्राउंड कलर और ऑनक्लिक बेसिक रिएक्ट ऐप में जेएस को प्रभावित नहीं करेंगे

मैं एक रिएक्ट लर्निंग टेक्स्टबुक के माध्यम से जा रहा हूं जो मुझे हुक के बारे में बता रही है। हुक वाला हिस्सा ठीक काम कर रहा है।

लेखक कुछ आसान शैली और संबंधित घटकों के साथ हुक को अनुकूलित करने का तरीका बता रहा है।

मेरे पास निम्न कोड है।

import React from 'react';
// import logo from './logo.svg';
import './App.css';
import StarRating from './components/StarRating';
import StarRating2 from './components/StarRating2';
import Headline from './components/Headline';

function App() {
  return (
    <article>
      <Headline/>       
      <StarRating/>
      <StarRating2
       style={{ backgroundColor: "blue" }}
       onClick={e => alert(" click")}
      />
    </article>
  );
}

export default App;

घटक कोड इस प्रकार है।

import { useState } from "react";
import React from "react";
import { FaStar } from "react-icons/fa";

const createArray = length => [...Array(length)];

const Star = ({ selected = false, onSelect = f => f }) => (
    <FaStar color={selected ? "red" : "grey"} onClick={onSelect} />
  );

const numberOfStarts = 10;
const numberDefaultState = 7;


function StarRating2({ totalStars = numberOfStarts }) 
{
    //will hold the user’s rating
    // create this variable by adding the useState hook directly to the StarRating component:
    const [selectedStars, setSelectedStars] = useState(numberDefaultState);
    return (
      <>
        <p>
          This is Star Rating 2 - and it has some imporvements
        </p>            
        {createArray(totalStars).map((n, i) => (
          <Star
            key={i}
            selected={selectedStars > i}
            onSelect=   {
            () =>   { 
                        setSelectedStars(i + 1);
                                                
                    }
                        }
          />
        ))}
        <p>
          {selectedStars} of {totalStars} stars
        </p>
      </>
    );
}

export default StarRating2;

दुर्भाग्य से, न तो घटक प्रदर्शन अपने बैक ग्राउंड रंग को बदलता है। न ही यह एक क्लिक का जवाब देता है। ऐप बिना किसी त्रुटि या कुछ भी चलता रहता है। और मैं देख सकता हूं कि फ़ायरफ़ॉक्स में रिएक्ट डेवलपर टूल्स में कंपोनेंट ट्री में स्टाइल प्रॉपर्टीज सेट दिखाई दे रहे हैं। तो, कोड निश्चित रूप से ऐप पर प्रतिबिंबित हो रहा है।

मैं अभी छठे अध्याय में हूं, और अब तक, प्रत्येक अध्याय कोड ने ठीक उसी तरह काम किया है जैसा कि पुस्तक में है। हालांकि यह वाला नहीं है। मुझे यकीन नहीं है कि यह एक गलत कोड है (और शायद, मुझे लेखक तक पहुंचना चाहिए) या यह कुछ ऐसा है जिसकी अब अनुमति नहीं है और पुस्तक बस पुरानी है।