From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Render default values in switch and file input

Render default values in switch and file input - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Render default values in switch and file input

“

To render the default value in the switch component, let me navigate to the switch component and receive default value data from props. Now I will give proper indentation and the attribute to the input field by saying default checked default value. Let's save the file and check the output. You'll observe that the switch is toggled by default. Alright now I will navigate to the custom file input component and take default value data from props. Now here we will receive the default value in the form of slash directory name slash file name. So we need to store this filename value to the state while the component is mounted or when the value of the default value is changed. So I will use the useEffect hook to store or update the value of the filename state on mount and also on change of the default value. So I will say useEffect, the arrow function. Now I will check the existence of default value. So I will say if default value is true then I will store the filename. For that I will…

Contents