Regex in React Hooks

Question

I want to set the className based on value from an API call. The API is a financial api that returns percent change in the form of 'perchange':'(+0.03%)'. I want to figure out if it is a positive, negative or neutral. I want to affect the css to either show green when positive red for negative, and gray from neutral.

 import React, { useState, useEffect } from "react";

function Ticker(props) {
  const [state, setState] = useState({});
  const [status, setStatus] = useState();

  useEffect(() => {
    let currStock = props.stock;
    const options = { method: "GET", headers: { Accept: "application/json" } };
    fetch(
      "https://financialmodelingprep.com/api/v3/company/profile/" + currStock,
      options
    )
      .then(response => response.json())
      .then(y => {
        setState(y.profile);
      });
  }, []);
  function positive(value) {
    //   The Goal being to set className to these so the css can be conditional.
    if (/\+/g.test(value) == true) {
      setStatus("positive");
    } else if (/\-/g.test(value) == false) {
      setStatus("negative");
    } else {
      setStatus("neutral");
    }
  }
  console.log(state);
  positive(state.changesPercentage);

  return (
    <div className="stock">
      <section className="stockInfo">
        <h1>{state.companyName}</h1>
        <h3> {state.industry}</h3>
        <img src={state.image} />
        <h3>Financials</h3>
        <p className="positive">{state.changes}</p>
        <p className={status}>{state.changesPercentage}</p>
        <p>${state.price}</p>
        <a href={state.website}>Learn More</a>
      </section>
    </div>
  );
}

export default Ticker;

The error I get when I run the code is Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. — utter_noob
– utter_noob, Commented Dec 26, 2019 at 21:42
Included the rest of the code for the function. it is connected to Main function which host all the other functions, but doesn't have a useEffect — utter_noob
– utter_noob, Commented Dec 26, 2019 at 21:58
You're basically setting state in the render--why not do that in your useEffect? — Dave Newton
– Dave Newton, Commented Dec 26, 2019 at 22:05
The was first thing i did. It still gives the same issue. of infinite loop. I can link the github if you would like the whole project — utter_noob
– utter_noob, Commented Dec 26, 2019 at 22:09

Sami Hult · Accepted Answer · 2019-12-26 22:28:22Z

1

You are calling setStatus in your render function (component function body). Moving the "positive" logic inside the effect (or another effect) will solve your problem.

React will not re-render the children or fire effects, if the value did not change during the update, but it will re-render the component at hand; which will, in turn, call the setStatus again.

Here's a working version: https://jsfiddle.net/jqLugkv8/

answered Dec 26, 2019 at 22:28

Sami Hult

3,0821 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

utter_noob Over a year ago

Thank you that helped with the infinite loop, if I can bother you for one more question. When I request fords ticker information it comes back as '(+0.05)' with the regex it should return positive, but comes back as neutral.

Sami Hult Over a year ago

You should probably open up another question for that.

Collectives™ on Stack Overflow

Regex in React Hooks

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related