Hi! My name is Yibo Chen and I create an Lorem Ipsum Generating React App with the Input (Form Input) element.
First of all, let's build the h3 title:
Secondly, let's set up the Form element with input element. Build the input element with control value, onChange, and pass data the the setCount useState and determine how many paragraph we want to generate in the page.
With the useState hook, we can build the how many page we want to show in the React app.
Most importantly, let's build the button element to submit our data on the showing page.
The onSubmit control element with handleSubmit function to change the data.
Set the e.preventDefault() to prevent the page refresh when the data change.
With the** parseInt(count)** we can slice the paragraphs to show on the page. And if the user select the number smaller than 0, the showing amount of the paragraph should be one, but if the user select the number bigger than the data, and the showing amount of the paragraph should be eight.
Because of the setText useState hook, we can use map() method to demonstrate the showing page of the text:
Thank You for reading my article. Please check on my netify page: https://react-app-lorem-ipsum-ac.netlify.app/, or my github page: https://github.com/chenyibo406/react-app-lorem-ipsum
Top comments (0)