how to get the ID of a post request in react hook axios?

Question

I am trying to create a post request in this post request I am creating an app after that, I want to create its liens so I need to get the id of the created items to create the lien so my question is there a method to get the id of the item created by the post request using Axios and react hooks I hope this image can explain something of what I want to do

I tryed this solution:

    const [idapp, setIdapp] = useState();
          const changeIdapp = (newFruit) => {
            setIdapp(newFruit)
          }
   function CreateApplication() {
        axios.post('http://localhost:8080/app/', {
          applicationName: nameapp,
          dateAjoute: dateajout
         
        },{ headers: authHeader() })
        .then((response) => {changeIdapp(response.data)
          
        }, (error) => {
          console.log(error);
        });
   }

(the post is only returning the id (LONG) )

and the code on the button create :

 <Button
                    className="btn-fill pull-right"
                    type="submit"
                    variant="info"
                    onClick={CreateApplication}
                  >
                    Create App
                  </Button>

but the problem is that the application is created but it's id not saved, if someone can help me with my problem I will be grateful. I want to add that the app and the lien are in OneToMany relation so one app contains many liens so what exactly I want to do when creating the app I want to save it id to create many liens for that app.

Update : this is all my code

import React, { useState } from "react";
import Select from 'react-select'
// react-bootstrap components
import {
  Badge,
  Button,
  Card,
  Form,
  Navbar,
  Nav,
  Container,
  Row,
  Col,
} from "react-bootstrap";
import axios from 'axios';
import authHeader from "./services/auth-header";


import Moment from 'moment';


function User() {

  var k;
    
      
  
      const [currentSelect, setCurrentSelect] = useState();
      const changeSelect = (newFruit) => {
        setCurrentSelect(newFruit)
      }

      const [nameapp, setNameapp] = useState();
      const changeNameapp = (newFruit) => {
        setNameapp(newFruit)
      }

      const [dateajout, setDateajout] = useState('2021-06-25');
      const changeDateajout = (newFruit) => {
        setDateajout(newFruit)
      }
      console.log(dateajout);
      const [idapp, setIdapp] = useState();
      const changeIdapp = (newFruit) => {
        setIdapp(newFruit)
      }
      console.log(idapp);


      function CreateApplication() {
        axios.post('http://localhost:8080/app/', {
          applicationName: nameapp,
          dateAjoute: dateajout
         
        },{ headers: authHeader() })
        .then((response) => {
          setIdapp(response.data.idApplication);
          console.log(response.data);
          
        }, (error) => {
          console.log(error);
        });
   }

    
      


      console.log(dateajout);
      console.log(idapp);

      
      

  return (
      
    <>
      <Container fluid>
      
        <Row>
          <Col md="10">
            <Card>
              <Card.Header>
                <Card.Title as="h4">creer Application</Card.Title>
              </Card.Header>
              <Card.Body style={{backgroundColor: '#F3AD7C'}}>
                <Form>
                  <Row>
                   
                    
                      <Form.Group>
                        <label>Application name</label>
                        <Form.Control
                          
                          placeholder="applicationName"
                          type="text"
                          onChange={(event) => changeNameapp(event.target.value)}
                          value={nameapp}
                        ></Form.Control>
                      </Form.Group>
                   
                   
                      
                    
                
                    
                      <Form.Group>
                        <label>Date d'ajoute</label>
                        <Form.Control
                         
                          placeholder="date d'ajoute"
                          type="date"
                          format="YYYY-MM-DD"
                         
                          
                          onChange={(event) => changeDateajout(event.target.value)}
                          value={dateajout}
                        ></Form.Control>
                      </Form.Group>
                    
                    
                      
                    
                  </Row>
                  <p></p>
                  
                  
                  <Button
                    className="btn-fill pull-right"
                    type="submit"
                    variant="info"
                    onClick={CreateApplication}
                  >
                    Create App
                  </Button>
                  <div className="clearfix"></div>
                </Form>
              </Card.Body>
            </Card>
<p></p>
            <Card>
              <Card.Header>
                <Card.Title as="h4">creer Liens</Card.Title>
              </Card.Header>
              <Card.Body style={{backgroundColor: '#F3AD7C'}}>
                <Form>
                  <Row>
                   
                    
                      <Form.Group>
                        <label>URL</label>
                        <Form.Control
                          
                          placeholder="URL du lien"
                          type="text"
                        ></Form.Control>
                      </Form.Group>           
                      <Form.Group>
                        <label>Type Test</label>
                        <p></p>
      <select 
        onChange={(event) => changeSelect(event.target.value)}
        value={currentSelect}
      >
        <option value="1">Repense</option>
        <option value="2">Authantification</option>
        <option value="3">Loop</option>
        
      </select>
                        
                       
                      </Form.Group>  
                                    
                  </Row>
                  <p></p>
                  
 




                  <p></p>
                  <Button
                    className="btn-fill pull-right"
                    type="submit"
                    variant="info"
                  >
                    Create Lien
                  </Button>
                  <div className="clearfix"></div>
                </Form>
              </Card.Body>
            </Card>
          </Col>
          <Col md="4">
            
          </Col>
        </Row>
      </Container>
    </>
  );
  console.log(dateajout);
}


export default User;

Answer 1

I find a solution to my problem the problem is that the state is always refreshed because whenever I click on create app the page is refreshed so that why my id is never saved so the solution was to stop the page from refreshing when I click on create app so the solution is modifying the function creatApplication of the post to

const CreateApplication = event => {
    axios.post('http://localhost:8080/app/', {
      applicationName: nameapp,
      dateAjoute: dateajout

    }, { headers: authHeader() })
      .then((response) => {
        setIdapp(response.data.idApplication);
        setShowcreateApp(false);
        console.log(response.data);

      }, (error) => {
        console.log(error);
      });
    event.preventDefault();
  }

so now the page is not refreshed and I have the stat saved

Answer 2

If response.data looks something like this:

{
    id: 42
}

Then you can do

setIdapp(response.data.id);

If response.data is a string instead of a JavaScript object, then you need to use JSON.parse() on it first.