JavaScript – Reaction to text change on state change – object

  • Home / Blog / JavaScript – Reaction…

JavaScript – Reaction to text change on state change – object

I would like to animate some text in a reactive form to a text object based on a change of values ​​in the store. I’m thinking of something like use, he said, adding that store-dependent effects will be able to fix it, but I’m not sure how to go about implementing it.

These are the values ​​I want to motivate {selection.price.toFixed(2)} Whenever in code below markets Changes, I want the new text to be removed and highlighted for a short period of time during the change of state.

export const MatchPrices = () => {
  const markets = useStore($markets);

  return (
    <Card className="price-display">
      <Table className="card-table prices-table" size="sm">
        <thead className="card-header">
          <tr>
            <th>Home</th>
            <th>Draw</th>
            <th>Away</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            {markets.length !== 0 ? (
              markets
                .filter((market) => market.mt === "MATCH_WINNER")[0]
                .selections.map((selection) => (
                  <td className="match-price" key={selection.id}>
                    {selection.price.toFixed(2)}
                  </td>
                ))
            ) : (
              <td>
                <Spinner
                  animation="border"
                  role="status"
                  style={{
                    marginLeft: "Auto",
                    marginRight: "Auto",
                  }}
                ></Spinner>
              </td>
            )}
          </tr>
        </tbody>
      </Table>
    </Card>
  );
};

I’m not really sure how to get CSS to work.

Write a Comment

Your email address will not be published. Required fields are marked *

x