title: how to display variable value in HTML tag in react
body: <p>I am working in react project and i need to display book title in HTML <p> element
  i created react function component which uses axios to get book from mongo DB</p>
  <pre><code>    import React from 'react';
      import axios from 'axios';
      import { useState } from 'react';
  
  
  
      export default function Main1() {
  
      var [books,setData]=useState([]);// must be in react function component 
      var book=&quot;&quot;;
      
  
      // use axios get async function
      //-------------------------------------------------------------------------------------------- 
     --------------------
      const clicked= async () =&gt; {// async function started
          console.log('clicked');
          try {
            const response = await axios.get('http://localhost:5000/');// get response from server
           console.log(response.data);
           //books=response.data;// add data to array
          // bks=response.data;
          books=response.data;
           console.log(books);
  
          } catch (err) {
            // Handle Error Here
            console.error(err);
          };
  
          book=books.find(book=&gt;book.isbn===document.getElementById(&quot;p2&quot;).innerText);
          console.log(book._id);
  
          try {
              const responseB = await axios.get('http://localhost:5000/'+book._id);// get response 
      from server
             console.log(responseB.data);
             //books=response.data;// add data to array
            // bks=response.data;
           book=responseB.data;
    
            } catch (err) {
              // Handle Error Here
              console.error(err);
            };
  
            document.getElementById(&quot;p1&quot;).innerText=book;
  
  
  
         // console.log(book.title);
         // document.getElementById(&quot;p1&quot;).innerText=book.title;
  
         // let bk=bks.find(isbn='20');
  
          //console.log(bk.title);
          
  
  
          //document.getElementById('p1').innerText=books[0].title;
  
  
      };
  
    
          
      // use axios get async function
      //-------------------------------------------------------------------------------------------- 
      --------------------
   
  
  
  
      
      return (
          &lt;div&gt;
             &lt;button  onClick={clicked}&gt;
                      hi
                  &lt;/button&gt;
                  &lt;p id='p2'&gt; 
                      20
                      
                      
                  &lt;/p&gt;  
                  &lt;p&gt;
                     {book} 
                  &lt;/p&gt;
          &lt;/div&gt;
      )
      };
  </code></pre>
  <p>the problem when ever i press the button i got the book variable displayed correctly in console log but it cannot be displayed in following <p> tag</p>
  <p>
             {book} 
          </p>