How to show warnings if a string literal is present in react template directly

How to show warnings if a string literal is present in react template directly (if the string is not coming through the variable)

<p>Hello World</p> //Need to display warnings

const X = "Hello World"
<p>{X}/p> // No Need to display warnings

I’m trying to understand. You want to see if the text showing on the screen is hard coded like this:

<p>Hello World</p>

or is a variable like this:

const X = "Hello World"
<p>{X}/p> // No Need to display warnings

At what point in the process do you want to show that? I expect it would be impossible to tell from querying the DOM - that’s just all transpiled into HTML anyway and both of those should transpile into the same thing, I would assume.

With this code:

import React from "react";

const App = () => {
  const text = "Howdy!";
  return (
    <>
      <p>Howdy!</p>
      <p>{text}</p>
    </>
  );
};

export default App;

I see this when I inspect the DOM:

image

There is no difference.

So, I guess you are left with parsing the source code.

In what context are you trying to do this? Walk us through what you want to happen.

1 Like