CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Jesús
Jesús

Reputation: 467

Cannot update component in React

I have a problem with updating a component that is this

https://www.npmjs.com/package/react-rating-stars-component, is for rating-stars, this is my component of the card where u can see the qualification that someone else rated:

import React, { useState, useEffect, useRef} from "react";
import "tailwindcss/tailwind.css";
import '../components/styles/Card.css';
import ReactStars from "react-rating-stars-component";
import {faSpotify} from '@fortawesome/fontawesome-free-brands'
import { faPen, faTrash } from "@fortawesome/free-solid-svg-icons";

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const Card = (data) => {

  const props = data.props;

  console.log('Calification: ');
  console.log(props.calification); // <-------------- This always print the updated value

  const stars = {
    size: 30,
    value: props.calification,
    edit: true,
    isHalf: true,
  }

  console.log(stars.value) // <-------------- This always print the updated value

  const card_options = React.useRef(null);
  const card = React.useRef(null);

  const handleMouseOver = () =>{
    card_options.current.classList.add('card-options-visible');
  }
  
  const handleMouseLeave = () =>{
    card_options.current.classList.remove('card-options-visible');
  }

  // const images = require.context('../images', true);
  // let img = images('./' + props.image);

  // console.log('imagen: ')
  // console.log(img)

  return (
    <React.Fragment>
      <div className="card-custom shadow-lg" onMouseLeave={handleMouseLeave}>
        <div className="card-header" onMouseOver={handleMouseOver} ref={card}>
          <div className="image-container">
          <img alt="" src="" className="song-img"/>             
          </div>
        </div>
        <div className="card-body">
          <h5 className="song-name">{props.songName}</h5>
          <h5 className="artist-name">{props.artist}</h5>
          {/*40 caracteres máximo*/}
          <p className="comment">{props.songReview}</p>
        </div>
        <div className="card-footer">
          <ReactStars {...stars} className="stars-calification"/> {// This component is not updated
          }
          <p className="autor">By: {props.author}</p>
          <div className="card-options" ref={card_options}>
            <div className="edit-option option-container">
              <FontAwesomeIcon icon={faPen} className="faPen" onClick={() => {
                data.update();
              }}/>
            </div>
            <div className="edit-option option-container">
              <FontAwesomeIcon icon={faTrash} className="faTrash" onClick={ (e)=> {
                
                data.delete({id: props.id, image: props.image})
              }}/>
            </div>
            <div className="edit-option option-container">
              <a href={props.spotifyUrl} target="_blank">
                <FontAwesomeIcon icon={faSpotify} className="faSpotify"/>
              </a>
            </div>
          </div>
        </div>

      </div>
    </React.Fragment>
  );
};

export default Card;

So, all the other parts of the component have the correct value, and are updated correctly, but the react-stars-component value is not updated and it shows always the first value, the way that is updated is like this: when fetching data from another component and passing that data to my card component, and the card component set the react value stars. U can see in the codeshare that a console.log(props.calification) that is the value that is not updated is updated, but not is reflected in the stars-component. Thanks for reading.

Upvotes: 1

Views: 383

Answers (1)

Mohammad Kurjieh
Mohammad Kurjieh

Reputation: 1143

Please update your version, this issue was fixed in the latest release , Link.

I tested it and it works. Check my example

Upvotes: 2

Related Questions