DEV Community

Austin Chen
Austin Chen

Posted on

With The Form Input element, I create a LOREM IPSUM Generating React App

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:

Image description

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.

Image description

With the useState hook, we can build the how many page we want to show in the React app.

Image description

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.

Image description

Because of the setText useState hook, we can use map() method to demonstrate the showing page of the text:

Image description

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)