Verify the response token reCAPTCHA v3 in JAVA. How do I return the response JSON object using JAVA

I’m trying to implement reCAPTCHA v3 in my project, in the login. I would like to implement something additional like “verify the response token” to check if it’s successful, the score for this request (0.0 – 1.0), etc.

This is my grecaptcha.execute

            $(document).ready(function() {
                $('#idEntrar').click(function() {
                    grecaptcha.ready(function() {
                        grecaptcha.execute('myKEY :)', {
                            action: 'validarUsuario'
                        }).then(function(token) {
                            //agregamos un elemento de tipo oculto al formulario
                            $('#loginModal').prepend('<input type="hidden" name="token" value="' + token + '" >');
                            $('#loginModal').prepend('<input type="hidden" name="action" value="validarUsuario" >');
                            //lo enviamos
                            $('#loginModal').submit();

                        });
                    });
                })
            })

        

I’ts working well, return the “request” in Mozilla like this:

action: “validarUsuario”
tokken: “the token”
UsuarioTxt: “user”
PasswordTxT: “password”

And now, I don’t know how do I return the response “Site Verify Response”

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

I hope you can understand what I’m trying to say, it would help me a lot, thanks for your time!!! 🙂

Combine React Full Calendar and Xarrows

I’m trying to combine fullcalendar.io and xarrows to create dependent events.

enter image description here

When dragging the event I would like the arrow to remain connected to the previous event as per xarrows demo: https://lwwwp.csb.app/CustomizeArrow

When using full calendar events that is not happening.

enter image description here

Here is the code example: https://codesandbox.io/s/fullcalendar-xarrows-zky5sy

import FullCalendar from "@fullcalendar/react";
import React, { useState } from "react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import Xarrow, { useXarrow, Xwrapper } from "react-xarrows";

const today = new Date();
const tomorrow = new Date(new Date().getTime() + 2 * 24 * 60 * 60 * 1000);
const afterTomorrow = new Date(new Date().getTime() + 4 * 24 * 60 * 60 * 1000);

export const INITIAL_EVENTS = [
  {
    id: "1",
    title: "AAA",
    start: today.toISOString().replace(/T.*$/, "")
  },
  {
    id: "2",
    title: "BBB",
    start: tomorrow.toISOString().replace(/T.*$/, ""),
    previousId: "1"
  },
  {
    id: "3",
    title: "CCC",
    start: afterTomorrow.toISOString().replace(/T.*$/, ""),
    previousId: "2"
  },
  {
    id: "4",
    title: "DDD",
    start: afterTomorrow.toISOString().replace(/T.*$/, ""),
    previousId: "2"
  }
];

const renderEventContent = (eventInfo) => {
  return (
    <>
      <div id={eventInfo.event.id}>{eventInfo.event.title}</div>
      {eventInfo.event.extendedProps.previousId && (
        <Xarrow
          start={eventInfo.event.extendedProps.previousId}
          end={eventInfo.event.id}
          color="black"
          headSize={3}
        />
      )}
    </>
  );
};

const DemoApp = () => {
  const [events] = useState(INITIAL_EVENTS);

  const updateXarrow = useXarrow();

  return (
    <div>
      <Xwrapper>
        <FullCalendar
          events={events}
          editable
          droppable
          selectable
          headerToolbar={{
            left: "prev,next today",
            center: "title"
          }}
          plugins={[interactionPlugin, dayGridPlugin]}
          eventContent={(args) => renderEventContent(args)}
          eventDragStart={updateXarrow}
          eventDragStop={updateXarrow}
        />
      </Xwrapper>
    </div>
  );
};

export default DemoApp;

clearInterval not clearing the set interval onMouseUp

Trying to make a button that you hold down and at the end of a set amount of time another function runs. The function runs onMouseDown and clears the interval onMouseUp but the interval still runs after releasing the button.

This is the code currently. I have the interval global and set it in the planting function. It should unset in the notPlanting function but it does not.

import React from "react";

function PlantDefuser() {
    var interval

    function planting() {
        interval = setInterval(() => {
            console.log("Defuser Planted")
        }, 1000)
    }

    function notPlanting() {
        console.log(interval)
        clearInterval(interval)
    }

    return (
        <button onMouseDown={planting} onMouseUp={notPlanting}>Press and Hold</button>
    )
}

export default PlantDefuser

How to evaluate a string as a React component?

I’m trying to make a website that lets users input some react code, then it renders it on the other side of the page, so they can see what it looks like.

My problem is, I have the user’s source code as a string (which may return a function or class component), but I don’t know how to convert that to an actual react component that can be rendered.

First I tried using the new Function() constructor, which lets you create a function from a string, which looks like this:

import {render} from "react-dom"

const userInputtedCode = `
return function App() {
    return <div>Hello world</div>
}
`

const func = new Function("React", userInputtedCode);
const App = func(React)
render(<App/>, document.getElementById('WorkFlow'));

But this doesn’t work, as I get the error SyntaxError: expected expression, got '<'

I have also tried libraries such as react-jsx-parser, but this doesn’t fit what I need, as I want to make an entire react component which may contain state, props, nested components, etc, not just parse some JSX.

Any ideas of how I can convert strings of source code that return a function/class into actual react components? Thanks!

Increment value every 4 seconds

Using HTML and AlpineJS I have the following:

<div 
  x-data='{ keys: ['a', 'b', 'c'], index: 0 }' 
  x-init="setTimeout(() => i = i < keys.length - 1 ? i + 1 : 0, 4000)">
</div>

I need the index to increment every 4 seconds and back to zero when reaches last one.

My code increments from 0 to 1 but it stops there.

How can I make this work?

Why my function is re-rendering even after I put it inside useCallBack() hook in reactJs?

I have a single search bar and I have to search two paramater strings into URL. I am using json-server as my fake API.

with single search bar, (controlled input component ), I have to fetch search results from –

  1. http://localhost:3000/books?q={query}
  2. http://localhost:3000/items?q={query}

so I made a condition for get like this –
// where all my requests to API Server are being kept – named agent.ts

    axios.defaults.baseURL = 'http://localhost:3000/';
    const responseBody = ( Response : AxiosResponse ) => Response.data;
    get : (url : string ) => axios.get( url).then( responseBody ),
    getPost : ( searchQuery? : string, fetch? : string ) => { 
        switch (fetch) {
          case 'books' : if (searchQuery) {
           return requests.get(`books?q=${searchQuery}`);
          } else return requests.get('books');
         
          case 'items' : if (searchQuery) {
            return requests.get(`items?q=${searchQuery}`);
           } else return requests.get('items');
    
          default : return ;

export default getPost;

So, accordingly I made two slices for books and items respectively as –
bookSlice.ts

import { createAsyncThunk, createEntityAdapter, createSlice } from "@reduxjs/toolkit";
import uuid from "react-uuid";
import agent from "../../../../api/agent";
import { Job } from "../../../../models/Job";
import { RootState } from "../../../Redux/reduxStore";

    interface BookState {
        status : string,
        loadedBooks : boolean;
        searchTerm : string;
    }
    
    export const bookAdapter = createEntityAdapter<Book>({
        selectId : ( element ) => element.bookId = uuid() // when jobId is primary key
    });
    
    // fetching list of books
    export const fetchJobsAsync = createAsyncThunk<Book[], string>(
        'jobs/fetchBookAsync',
        async ( searchQuery, thunkAPI ) => {
         try {
            console.log(searchQuery, 'this reached thunk')
           return await agent.getPost(searchQuery, 'books'); // here I passed as 'books' to differentiate it from 'item' 's createAsyncThunk
            
         } catch ( error : any ) {
         return thunkAPI.rejectWithValue({ error : error.data });
         }}
    );
    
    export const bookSlice = createSlice({
        name : 'books',
        initialState : bookAdapter.getInitialState<JobState>({
        status : 'idle',
        loadedBooks : false,
        searchTerm : '',
        }),
        reducers : {
          setSearchTerm : ( state, action ) => {
            state.searchTerm = action.payload;
          }
        },
        extraReducers : (builder => {
            builder.addCase(fetchBooksAsync.pending, ( state ) => {
                state.status = 'pending'
            });
            builder.addCase(fetchBooksAsync.fulfilled, ( state, action ) => {
                bookAdapter.setAll( state, action );
                state.loadedBooks = true;
                state.status = 'idle';
            });
            builder.addCase(fetchBooksAsync.rejected, ( state ) => {
                state.status = 'idle'
            });
        })
    });
    
    export const jobSelector = bookAdapter.getSelectors((state : RootState ) => state.books );
    export const { setSearchTerm } = bookSLice.actions;

similarly, I made exact same slice for items – itemSlice.ts

 import { createAsyncThunk, createEntityAdapter, createSlice } from "@reduxjs/toolkit";
    import uuid from "react-uuid";
    import agent from "../../../../api/agent";
    import { Item } from "../../../../models/Item";
    import { RootState } from "../../../Redux/reduxStore";
    
        interface ItemState {
            status : string,
            loadedItems : boolean;
        }
        
        export const itemAdapter = createEntityAdapter<Item>({
            selectId : ( element ) => element.itemId = uuid() // when jobId is primary key
        });
        
        // fetching list of Items
        export const fetchItemsAsync = createAsyncThunk<Items[], string>(
            'jobs/fetchItemsAsync',
            async ( searchQuery, thunkAPI ) => {
             try {
                console.log(searchQuery, 'this reached thunk') // here I console logged to check
               return await agent.getPost(searchQuery, 'items'); // here I passed as 'books' to differentiate it from 'item' 's createAsyncThunk
                
             } catch ( error : any ) {
             return thunkAPI.rejectWithValue({ error : error.data });
             }}
        );
        
        export const itemSlice = createSlice({
            name : 'items',
            initialState : itemAdapter.getInitialState<ItemState>({
            status : 'idle',
            loadedItems : false,
            }),
            reducers : {
            },
            extraReducers : (builder => {
                builder.addCase(fetchItemsAsync.pending, ( state ) => {
                    state.status = 'pending'
                });
                builder.addCase(fetchItemsAsync.fulfilled, ( state, action ) => {
                    bookAdapter.setAll( state, action );
                    state.loadedItems = true;
                    state.status = 'idle';
                });
                builder.addCase(fetchItemsAsync.rejected, ( state ) => {
                    state.status = 'idle'
                });
            })
        });
        
        export const itemSelector = itemsAdapter.getSelectors((state : RootState ) => state.books );
        export const { } = itemSlice.actions;

To both these slices, I am making use of them inside of my Post component as

here I am only including main things and not complete code of my Post component , please acknowledge

   export default function Post(){
    const {searchTerm, loadedBooks} = useAppSelector(state => state.books)
    const {loadedItems} = useAppSelector(state => state.items)
    
// using entity adapters
const Books = useAppselector(bookSelector.selectAll)
const Items = useAppselector(itemSelector.selectAll)
const dispatch = useAppDispatch();

// useCallBack hook
const fetchAll = useCallBack(async () => {
const mySearch = setTimeout(() => {
await dispatch(fetchBooksAsync(searchTerm)); // call to thunk here for fetching books
await dispatch(fetchItemsAsync(searchTerm)); // call to thunk here for fetching Items}
}, [dispatch, searchTerm]);

const fetchSearchedResults = useCallBack(async () => {
if (!loadedBooks) return dispatch(fetchBooksAsync(searchTerm) // call to thunk for books
if (!loadedItems) return dispatch(fetchItemsAsync(searchTerm) // call to thunk for items
}, [dispatch, loadedBooks, loadedItems, searchTerm]);

// calling these two useCallBacks, inside of single useEffect() - hook
useEffect(() => {
fetchAll();
fetchSearchedResults();
}, [ fetchAll, fetchSearchedResuts ]); // dependencies of both the functions above, which in turn are wrapped inside of their own useCallback() hook.

return (
{Books.map((book) => (
<Typography key = {book.bookId}>{book.bookname}</Typography>)}

{Items.map((item) => (
<Typography key = {item.itemId}>{item.name}</Typography>)}
)}

// and my search component is 
<TextField value = {searchTerm}
 onChange = {(event) => dispatch(setSearchTerm(event.target.value))} />
// this setSearchTerm is an action dispach that is comming from my bookSlice.ts file.
)}

So, I want to take suggestions and answers/comment on 2 things here?

  1. Please look carefully at my agent.ts file. Please look at getPosts(), endpoint, asa you might have understood that I want to call 2 different url addresses with the single search bar, so is this way is correct (inside of my agent.ts file? ), or if not, please suggest some optimal method to do this.
  2. 2nd and most important, see, I am not getting any error into my application, everything is working fine, except for the fact that my useEffect() – hook is re-rendering over and over again.

As you can see the console log –

this reached thunk
bookSlice.ts:22  this reached thunk // 2times rendered
bookSlice.ts:22  this reached thunk // 2 more times rendered
bookSlice.ts:22  this reached thunk // 2 more times rendered
itemSlice.ts:22  this reached thunk// 2 times rendered

so, my bookSlice alone is getting rendered 6 times, so as an effect of this, my Books and items cards are taking time to load into my UI, which is not optimal as per user experiance perspective.

so , Please tell me why this is happening into my console. I have also seen my redux state inside of redux-dev-tools, there also

`book/fetchBookAsync` is triggered almost 6 times and same for items as well
 item/fetchItemAsync // this is getting triggered 4 times

So, please tell me why this is happening? even after I used useCallback(), hook to hold the async logic and finally called both functions (useCallBack()) into a single useEffect() hook?

Am I doing any mistake into my agent.ts file?

Kindly help me in reducing the number of re-renders of my

fetchBookAsync thunk and 
fetchItemsAsync thunk

Thank you.

Notification JS functions not working in background

I am using FCM notifications, I execute Howl js to play a sound and an alert() when a notification arrives, everything works perfectly but when my page is in the background, or in another tab it does not execute the Howl js function, it only arrives the system notification. How could I run functions in the background?

const messaging = firebase.messaging();

navigator.serviceWorker.register("{{url('firebase/sw-js')}}")
            .then((registration) => {
                messaging.useServiceWorker(registration);
                messaging.requestPermission()
                    .then(function() {
                        console.log('Notification permission granted.');
                        getRegToken();

                    })
                    .catch(function(err) {
                        console.log('Unable to get permission to notify.', err);
                    });
 

messaging.onMessage(function(payload) {

                    const notificationTitle = payload.data.title;
                    const notificationOptions = {
                        body: payload.data.body,
                        icon: payload.data.icon,
                        image:  payload.data.image,
                        requireInteraction : true
                    };
                                      
                    var notification = new Notification(notificationTitle,notificationOptions);
                    console.log("Message received. ", payload);


                    notification.addEventListener('show', (event) => {
                        console.log('Notification ');
                        audio.play();
                    });

                    notification.addEventListener('close', (event) => {
                        audio.stop();
                    })
                    
                });
               
            });


 var audio = new Howl({
                    src: ["{{asset('notification.mp3')}}",'notification.webm'],
                    onplayerror: function(){
                        audio.once('unlock',function(){
                            audio.play();
                        });
                    },
                    html5:true,
                    loop: true,
                    preload:true,
            });

How could I run functions in the background?,If the user allows notifications to the website, why doesn’t it run in the background?

Handsontable disabled/grayed-out column insert/remove options in contextMenu

So I’m using Handsontable library in React to create excel like tables, where HotTable is library component with some options, like contextMenu – modal window , and columns.
Issue is that if I specify columns in HotTable component , in modal window insert/remove column functionality is disabled/grayed-out , not removed. How to enable it?

import { useMemo } from 'react'

import HotTable from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import { ColumnSettings, GridSettings } from "handsontable/settings";
import 'handsontable/dist/handsontable.full.min.css';

registerAllModules();

const MIN_COLS = 30;
const MIN_ROWS = 500;

const data = [
  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford', 'Audi'],
  ['2019', 10, 11, 12, 13],
  ['2020', 20, 11, 14, 13],
  ['2021', 30, 15, 12, 13]
];

export const excelTables = () => {

  const columns = [...new Array(MIN_COLS)].map(
    () =>
      ({
        // some key : value pairs -- super important
      } as ColumnSettings)
  );

  return (
      <HotTable
        data={data}
        rowHeaders={true}
        colHeaders={true}
        contextMenu={true}
        columns={columns}
        licenseKey={ "non-commercial-and-evaluation"}
      />
  );
};

with columns option in HotTable component

enter image description here

without columns option in HotTable component

enter image description here

Columns – in docs said that this option overwrites the top-level grid options. This is just minimal reproducible example, in project I need to specify columns option.

I am new to react, previously I created react apps but not trying to create a react app but after taking a long time it is giving an error

Previously used this command;

npx create-react-app 'project_name'
-but now this is giving error, used other commands as;

npx [email protected] 'project_name'
npm create-react-app 'project_name'

node version is: v16.17.0
npm version: 9.1.2

same error, then tried to use uninstall react globally and installed it again and tried
npx create-react-app 'project_name'

and having same error again..

`npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/@typescript-eslint%2ftypescript-estree: aborted
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network ‘proxy’ config is set properly. See: ‘npm help config’

npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersSTAppDataLocalnpm-cache_logs2022-11-29T19_03_34_604Z-debug-0.log`

only packages.json file is created and at failure it is also deleted…

As this command was working fine just a few days ago
npx create-react-app

I am new to this framework if there is a mistake kindly help me along..

Extended Vuetify component doesn’t render

Stemming from the example in the Vuetify docs I am trying to extend a component and override a method.

Unlike the example, I am trying to extend VSelect:

<script lang="js">
    import Vue from 'vue'

    const VSelect = Vue.options.components["VSelect"]
    const ModifiedVSelect = {
        extends: VSelect
    }
</script>

I’ve started simple by not trying to override anything, but instead just extend the component and see if I can import it and use it in another component:

// lots of template stuff above
<div id="itemTypes">
  <ModifiedVSelect
    v-model="selectedTypes"
    :items="availableItems"
    label="Items"
    item-color="lightgrey"
    item-text="items"
    dense
    multiple
    return-object
  >
  </ModifiedVSelect>
</div>
// and more template stuff below

<script lang="js">
  import ModifiedVSelect from '../Controls/ModifiedVSelect'
  // other imports

  export default {
    name: 'MyComponent',
    components: {
      ModifiedVSelect,
      // other components
    },
  // bunch of other stuff
</script>

This v-select extension doesn’t render, but if I remove the import, registration and change the ModifiedVSelect to v-select in the <template></template>, then it renders.

Is there something else I need to do? Doesn’t appear to be outlined in the docs if so.

Why am I getting an invalid URL on this stimulus controller?

I am trying to dynamically load form partials based on a select dropdown change. I am getting an error though stating failed to construct URL, invalid URL. I’m not really sure what this is looking for. Logging the URL to console shows this: /scheduleevents/select

Can anyone help me out?

scheduleevent form:

<select data-controller="remote-select" 
        data-remote-select-url-value="<%= scheduleevents_select_path %>" 
        data-remote-select-name-value="form[occurrence]" 
        data-action="change->remote-select#update">
        <%= Scheduleevent.occurrences.each do |occurrence| %>
          <option value="<%= occurrence.second %>"><%= occurrence.first %></option>
        <% end %>
</select>

remote_select_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    url: String,
    name: String,
  }

connect() {
    console.log("Connected to controller.");
    this.element.setAttribute('data-action', 'change->remote-select#update');
  }

  update() {
    console.log(this.urlValue);
    const url = new URL(this.urlValue);
    
    url.searchParams.append(this.nameValue, this.element.value);

    Turbo.visit(url, { action: "replace" });
  }
}

Route:

get 'scheduleevents/select' => 'scheduleevents#select'

scheduleevents controller:

def select
  @selected = params[:form][:occurrence]
end

select partial:

<%= turbo_frame_tag :section_two %>
  <%= render partial: @selected %>
<% end %>

Upgrading SLEEKY plugin for YOURLS to use new Unsplash API for background

I have a simple YOURLS link shortening website running the Sleeky theme plugin. The background set in config.php as

define('backgroundImage', 'https://source.unsplash.com/category/landscape');

It seems the old API does not work any more so the background function is broken.

I tried running the following js to try and make it work but I am obviously doing something fundamentaly wrong:

<script type="text/javascript">
fetch("https://api.unsplash.com/search/photos?query=background&client_id=xxxxxxxxxxxxxxxxxxxxxx")
    .then(
        function(response){
            
            
            if(response.status !== 200){
                console.log("There was a problem. Status code: " + response.status);
                return;
            }

            response.json().then(
                
                   document.body.style.backgroundImage = 'url(' + data["results"][0]["urls"]["regular"]+')';
                
            )
        }
    )
    .catch(
        function(err){
            console.log(err+'404');
        }
        )
</script>

Would you be able to steer me in the right direction please?

Firebase – Can I set() existing JSON into Real-Time Database?

I am making an app that should display live soccer data. For the back end, I get my data from an API and want to place this in Firebase’s real-time database to allow for live data in the app. The data from the API already comes as JSON, so is there any way to utilize this?

The top level of the real-time database should be dates from a fixed interval, and under each date, I want to nest the JSON data from the API.

Below is how I am currently trying to insert into the real-time database using the set() method, though, nothing happens in its current state.

import { initializeApp } from "firebase/app";
import { getDatabase, ref, set } from "firebase/database";
import { getDates } from './dates.js';
import { getDataApi, getCurrentSeason } from './api_manager.js';
import { idList } from '../data/data.js';

const firebaseConfig = {
...
};

const app = initializeApp(firebaseConfig);
const db = getDatabase();

function update() {
    var startDate = new Date();
    var season = getCurrentSeason().then(val => val);
    var datesArr = getDates(startDate, 7);

    datesArr.forEach(date => {
        idList.forEach(id => {
            const reference = ref(db, `${date}/${id}`);
            var data = getDataApi(date, id, season);
            set(reference, data);
        });
    });
}

update();

If it’s of any interest, these are my methods for fetching the data from the API:

import fetch from 'node-fetch';

const options = {
  method: 'GET',
  headers: {
    ...
  }
};

export async function getDataApi(date, leagueId, season) {
    const url = `https://api-football-v1.p.rapidapi.com/v3/fixtures?date=${date}&league=${leagueId}&season=${season}`;

    try {
        let response = await fetch(url, options);
        let json = await response.json();
        return json['response'];
    } catch (error) {
        console.log("Error: " + error);
    }
}

export async function getCurrentSeason() {
    const url = 'https://api-football-v1.p.rapidapi.com/v3/leagues?id=39&current=true';
    try {
        let response = await fetch(url, options);
        let json = await response.json();
        return json['response'][0]['seasons'][0]['year'];
    } catch (error) {
        console.log("Error: " + error);
    }

}

React form handling

I’m new to React and I’m practicing some form-input handling with Hooks. So far I have something where you can “purchase” tickets for an amusemenet park. It has all the necessary hooks and props to pass the data and read the data from the input fields. Except it’s giving me the following error message: “Uncaught TypeError: props.onSaveExpenseData is not a function”. But onSaveExpenseDate is being passed. Does anyone know why this is happening and nothing is being displayed on the screen?


NewExpense.js

`

import React from "react";
import "./NewExpense.css";
import Ticket from "./ticket";

const NewExpense = (props) => {
  const saveExpenseDataHandler = (enteredExpenseData) => {
    const expenseData = {
      ...enteredExpenseData,
      id: Math.random().toString(),
    };
    props.onAddExpense(expenseData);
  };

  return (
    <div className="new-expense">
      {/* This is a convention that i'm following "onSaveExpenseData", to make it clear that hte value for this prop is a function and can be used to call this instead
      of the expense form component. */}
      <Ticket onSaveExpenseData={saveExpenseDataHandler} />
    </div>
  );
};

export default NewExpense;

`

ticket.js

`

import React, { useState } from "react";
import "./Ticket.css";
const Ticket = (props) => {
  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredAmount, setEnteredAmount] = useState("");
  const [enteredDate, setEnteredDate] = useState("");
  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
  };

  const amountChangeHandler = (event) => {
    setEnteredAmount(event.target.value);
  };

  const dateChangeHandler = (event) => {
    setEnteredDate(event.target.value);
  };

  const submitHandler = (event) => {
    event.preventDefault();

    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };

    props.onSaveExpenseData(expenseData);
    setEnteredTitle("");
    setEnteredAmount("");
    setEnteredDate("");
  };

  return (
    <form onSubmit={submitHandler}>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input
            type="text"
            value={enteredTitle}
            onChange={titleChangeHandler}
          />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input
            type="number"
            value={enteredAmount}
            onChange={amountChangeHandler}
            min="1"
            max="10"
          />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input
            type="date"
            value={enteredDate}
            min="2022-01-01"
            max="2024-12-31"
            onChange={dateChangeHandler}
          />
        </div>
      </div>
      <div className="new-expense__actions">
        <button type="submit">Buy ticket</button>
      </div>
    </form>
  );
};

export default Ticket;

`

I’ve tried to make several states and make use of eventhandlers to submit the data.