reactjs - how to display variable value in HTML tag in react - TagMerge
5how to display variable value in HTML tag in reacthow to display variable value in HTML tag in react

how to display variable value in HTML tag in react

Asked 1 years ago
0
5 answers

You need to set the state again.

Example

export default function Main1() {

    const [books,setData]=useState(['']);// must be in react function component 
    /* var book=""; You can set on usestate as empty string*/  

const clicked= async () => {// async function started
        console.log('clicked');
        try {
          const response = await axios.get('http://localhost:5000/');// get response from server
         console.log(response.data);
         console.log(books);
         setData(response.data); // set the variable that you get

        } catch (err) {
          // Handle Error Here
          console.error(err);
        };

Source: link

0

Here's what CSS variables look like:
css
Tutorials often show CSS variables being attached to a mysterious :root selector:
css
First, I'm going to assume that you have a file that holds all of your design tokens, something like this:
js
In a React app, you might import them directly into the components that need them:
jsx
Or, you might use a theme:
jsx

Source: link

0

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous. For example:
function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}
The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. For example:
const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}
Note that styles are not autoprefixed. To support older browsers, you need to supply corresponding style properties:
const divStyle = {
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browser</div>;
}
React will automatically append a “px” suffix to certain numeric inline style properties. If you want to use units other than “px”, specify the value as a string with the desired unit. For example:
// Result style: '10px'
<div style={{ height: 10 }}>
  Hello World!
</div>

// Result style: '10%'
<div style={{ height: '10%' }}>
  Hello World!
</div>
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the camelCase convention just like the DOM APIs:
<div tabIndex={-1} />      // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API
<input readOnly={true} />  // Just like node.readOnly DOM API

Source: link

0

Lets start with the code from our last post:
var Hello = React.createClass({
    render: function() {
        return <div>Hello, haters!</div>;
    }
});
To render a Javascript expression in JSX, all you need to do is surround the expression in curly braces, like so:
var Hello = React.createClass({
    render: function() {
        return <div>Hello, { targetOfGreeting }!</div>;
    }
});
Right now this component will render “Hello, !” because targetOfGreeting currently contains no value. Lets set it to “world” instead — but where should we define the variable targetOfGreeting? React's render method is just a regular old method, which means that it can contain variables, functions, and any other code required to make your view render. Considering our circumstances, this seems like an apt place to define targetOfGreeting:
var Hello = React.createClass({
    render: function() {
        var targetOfGreeting = "world";
        return <div>Hello, { targetOfGreeting }!</div>;
    }
});
The last thing worth mentioning is how you can use Javascript expressions to populate HTML attributes. A great example of this is programmatically setting CSS classes, which can be done like so:
var Hello = React.createClass({
    render: function() {
        var myStyleClass = "exampleCss";
        var targetOfGreeting = "world";
        return (
            <div className={ myStyleClass }>
                Hello, { targetOfGreeting }!
            </div>
        );
    }
});

Source: link

0

The document.write() method allows you to replace the entire content of HTML <body> tag with HTML and JavaScript expressions that you want to be displayed inside the <body> tag. Suppose you have the following HTML element:
<body>
  <h1>Hello World</h1>
  

Greetings

</body>
When you run document.write("Hello") method on the HTML piece above, the content of <body> will be replaced as follows:
<body>
  Hello
</body>
Knowing this, you can display any JavaScript variable value by simply passing the variable name as the parameter to document.write() method:
let name = "Nathan";
document.write(name); // Writes Nathan to the <body> tag

let num = 999;
document.write(num); // Writes 999 to the <body> tag
For example, imagine you have the following HTML <body> tag:
<body>
  <h1 id="header">Hello World</h1>
  <p id="greeting">Greetings

</body>
Here’s how you do it:
document.getElementById("greeting").innerHTML = "Bonjour";

Source: link

Recent Questions on reactjs

    Programming Languages