how to set value in dom?-CodePudding

This is part of my code :

const currentPrice = useRef(null);

const [currentPriceTooltip, setCurrentPriceTooltip] = useState(0);
    
    useEffect(() => {
        if (props.instrument) {
          setRange(props.instrument);
    }
    }

    const setRange = (instrument) => {
      const currentPricePosition =
          rangeInfo.HighestTradePrice > rangeInfo.UpperStaticThreshold
            ? ((rangeInfo.LastTradePrice - rangeInfo.LowerStaticThreshold) /
                (rangeInfo.HighestTradePrice - rangeInfo.LowerStaticThreshold)) *
              100
            : ((rangeInfo.LastTradePrice - rangeInfo.LowerStaticThreshold) /
                (rangeInfo.UpperStaticThreshold - rangeInfo.LowerStaticThreshold)) *
              100;
    
        currentPrice.current.style.left = `${currentPricePosition}%`;
        setCurrentPriceTooltip( comma(rangeInfo.LastTradePrice))
        currentPrice.current.children[0].style.fill =
          rangeInfo.LastTradePrice > rangeInfo.PreviousDayPrice
            ? `${theme.palette.color.green}`
            : `${theme.palette.color.red}`;
    
    
    }


      return (
          <>
          <Tooltip
                    placement="top"
                    title={currentPriceTooltip}
                  >
                    <Grid
                      item
                      className={classes.currentPrice}
                      ref={currentPrice}
                      onClick={() => clickHandler(currentPriceTooltip)}
                    >
                      <LocationIcon
                        className={clsx(
                          classes.currentPriceIcon,
                          device.isMobile && classes.currentPriceIconMobile
                        )}
                      ></LocationIcon>
                    </Grid>
                  </Tooltip>
                   </>
               )

I want to set directly on the Dom and not use the state.How can I use useRef I do not want to have a state . This is what I did:

  const setRange = (instrument) => {
  ////The things above  
   currentPrice.current.value = comma(rangeInfo.LastTradePrice);
    
        }
 <Tooltip
                    placement="top"
                    title={currentPrice.current.value}
                  >

I can not have this in tooltip for the first time

CodePudding user response：

currentPrice.current give value from DOM

And you could set the Value by using the same

for example

currentPrice.current= "Any value you want"

CodePudding user response：

As you want to use useRef hook to update tooltip content, you need to use some DOM manipulation methods to update the tooltip content, So if you update ref value like this:

tooltipRef.current = "updated value"

It will only update current value of the tooltipRef object and it won't reflect on the UI, As you know in react DOM is updated only when any state or prop changes were done.

so to achieve same using useRef hook, we need to take help of some of the props of the component

  <div className="App">
  <Tooltip PopperProps={{disablePortal:true, keepMounted: true}}  onOpen={(e) => {
    e.target.nextElementSibling.querySelector("div").innerHTML = toolTipRef.current
  }}>
    <div>Tooltip</div>
  </Tooltip>
</div>

Here we are using some PopperProps

disablePortal: true => making this true will append tooltip markup in same html div instead of outside
KeepMounted: true => making this true will always make markup div available

so after doing above things active we will use onOpen method where we will get access to tooltip ref div, so by using it will reach to out actual tooltip content div and update it's content which we have stored inside out tooltipRef variable.

To check working demo here is the ref link CodeSandbox