React - Parse String with Variables

Question

I have a json file of strings that also need to have variables in them. (This is not by choice, by requirements) EDIT (for context) - All of the text within the web app is to be dynamic. Each component will have it's own key, with multiple key-value pairs such as:

"component_one": {
  "heading": "Heading Text",
  "subheading": "Subheading Text",
  "list_item_one": "List Item Text",
  "list_item_two": "List Item Text",
  "list_item_three": "List Item Text",
  "button": "Button Text"
},

where one or more items in the string need to reference a variable within that component.

So for example:

{
    "text": "This is my example string with {variable} that needs to be interpolated"
}

When I pull in the file and render the string, it's not interpolating the {variable} part. Is there a best practice approach to rendering these variables within react? I'm saving the text file to context after grabbing it from the api.

  const Component = () => {
      const { account } = useContext(AppContext);
      let variable = 'testing';
      return <div>{account.text}</div>;
    };

I also tried using dangerouslySetInnerHTML but that didn't work either.

From the api call:

  const getText = useCallback(async (token) => {
try {
  let file = process.env.REACT_APP_FILE_NAME;
  let response = await api.get(`${file}`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
  dispatch({ type: "SET_TEXT", text: response.data });
} catch (err) {
      console.warn(`Get Text Error: ${err}`);
    }
  }, []);

Can you post the part where you read the json and interpolate the string as well? — Roni Antonio
– Roni Antonio, Commented Aug 27, 2020 at 14:12
@RoniAntonio I updated with the api call, I think that's what you're asking about. The actual inclusion of the string is in <div>{account.text}</div>. — Almost_Ashleigh
– Almost_Ashleigh, Commented Aug 27, 2020 at 14:17
where are you declaring variable that supposed to be rendered? — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 27, 2020 at 14:26
@BoussadjraBrahim I just updated it, inside the component is where I'm declaring the variable to be rendered. but it prints out on the page just the text without even interpolating it. like "This is my example string with {variable} that needs to be interpolated" on the page — Almost_Ashleigh
– Almost_Ashleigh, Commented Aug 27, 2020 at 14:28

Boussadjra Brahim · Accepted Answer · 2020-08-27 14:57:52Z

2

I want to suggest the following solution, define your variable inside an object called state then split your string by space which will give you an array like ['string', 'with', '{variable}','that'] , loop through this array and when you find a string that starts with { try to remove { and } from it and access the state using that string :

  const Component = () => {
      const { account } = useContext(AppContext);
      let state={ variable : 'testing'};
      return <div>{account.text.split(' ').map(str=>{
           if(str.startsWith('{')){
            return state[str.replace(/[{}]/g,'')]+' ' //add space
            }else{
            return str+' ';
        }
       })}
    </div>;
    };

Check this example

edited Aug 27, 2020 at 14:57

answered Aug 27, 2020 at 14:47

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

React - Parse String with Variables

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related