john-smilga / react-vite-projects-8-lorem-ipsum Goto Github PK

Steps

Count State Value

In App.jsx, set up a count state value using the useState hook. Set the default value to 1.

Form

Set up a form element that contains a number input and a submit button. Attach the count state value to the input using the value prop, and set up a handleChange function to update the count state value when the input changes. Set the minimum value to 1, the maximum value to 8, and the step to 1.

Import Text and State Value

Import the text array from data.js and set up a text state value using the useState hook. Set the default value to an empty array.

OnSubmit

Attach an onSubmit event to the form, and create a handleSubmit function to handle the form submission. Inside the handleSubmit function, prevent the default form submission behavior using event.preventDefault(). Get the count state value, and use it to create a new array by extracting the first n paragraphs from the text array (where n is the count state value). Set the text state value to the new array.

Render Text

Render the text state value below the form. You will need to use the map method to iterate over the array and render each paragraph. Use the nanoid library to generate unique ids for each paragraph.

Overall, the flow of the application should look something like this:

• In App.jsx, set up a count state value using the useState hook.
• Set up a form element that contains a number input and a submit button.
• Import the text array from data.js and set up a text state value using the useState hook.
• Attach an onSubmit event to the form, and create a handleSubmit function to handle the form submission.
• Render the text state value below the form using the map method to iterate over the array and render each paragraph with a unique id generated by the nanoid library.