Currently, I have started working on a multi-step form that is designed to be very simple and clean. However, I am facing an issue where nothing is being displayed when I click on the next arrow.
I am puzzled as to why it's not even displaying the text at the moment.
Below is the code snippet:
import React from 'react'
import './ClassCreationForm.css'
class ClassCreationForm extends React.Component {
constructor(props, context) {
super(props);
this.state = {
questions: [
{ phrase: 'Enter Your First Name' },
{ phrase: 'Enter Your Last Name' },
{ phrase: 'Enter Your Email', pattern: /\S+@\S+\.\S+/ },
{ phrase: 'Create A Password', type: 'password' }
],
shakeTime: 100,
switchTime: 200,
position: 0,
currentAnswer: ''
};
}
handleKeyUp = (event) => {
const { value, keyCode } = event;
this.setState({
currentAnswer: value
});
if (keyCode === 13) {
this.validate();
}
}
handleNextClick = (event) => {
this.validate();
}
validate = () => {
console.log(this.state.currentAnswer);
}
render() {
const { questions, position } = this.state;
const { phrase, type, pattern } = questions[position];
return (
<div id="container">
<h1 className="logo">Class ClassCreationForm</h1>
<div id="form-box">
<i id="prev-btn" className="fas fa-arrow-left"></i>
<i
id="next-btn"
className="fas fa-arrow-right"
onClick={this.handleNextClick}
></i>
<div id="input-group">
<input
id="input-field"
type={type || 'text'}
onKeyUp={this.handleKeyUp}
required
/>
<label id="input-label">
{ phrase }
</label>
<div id="input-progress"></div>
</div>
<div id="progress-bar"></div>
</div>
</div>
)
}
}
export default ClassCreationForm
Additionally, here is the associated CSS code:
h1.logo {
color: #333333;
font-family: 'Fredoka One', cursive;;
font-size: 4em; }
h1.end {
position: relative;
color: #fff;
opacity: 0;
transition: 0.8s ease-in-out; }
#container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: top;
align-items: center; }
#form-box {
background: #fff;
position: relative;
width: 600px;
border-top-right-radius: 18px;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.03), 0 6px 10px 5px rgba(0, 0, 0, 0.03), 0 8px 10px -5px rgba(0, 0, 0, 0.03);
}
#form-box.close {
width: 0;
padding: 0;
overflow: hidden;
transition: 0.8s ease-in-out;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0); }
#next-btn {
position: absolute;
right: 20px;
bottom: 10px;
font-size: 40px;
color: #dbdada;
float: right;
cursor: pointer;
z-index: 2; }
#next-btn:hover {
color: #ff7255; }
#prev-btn {
position: absolute;
font-size: 18px;
left: 30px;
top: 12px;
z-index: 2;
color: #dbdada;
float: right;
cursor: pointer; }
#prev-btn:hover {
color: #ff7255; }
#input-group {
position: relative;
padding: 30px 20px 20px 20px;
margin: 10px 60px 10px 10px;
opacity: 0;
transition: opacity 0.3s ease-in-out; }
#input-group input {
position: relative;
width: 100%;
border: none;
font-size: 20px;
font-weight: normal;
outline: 0;
background: transparent;
box-shadow: none; }
#input-group #input-label {
position: absolute;
pointer-events: none;
top: 32px;
left: 20px;
font-size: 20px;
font-weight: bold;
color: red;
transition: 0.2s ease-in-out; }
#input-group input:valid + #input-label {
top: 6px;
left: 42px;
margin-left: 0 !important;
font-size: 11px;
font-weight: normal;
color: #ff7255; }
#input-progress {
border-bottom: 3px solid #ff7255;
width: 0;
transition: width 0.6s ease-in-out; }
#progress-bar {
position: absolute;
background: #fcae9e;
height: 10px;
width: 0;
transition: width 0.5s ease-in-out; }
.close #next-btn,
.close #prev-btn {
color: #ff7255; }
.error #input-progress {
border-color: #ff7255; }
.error #next-btn {
color: #ff7255; }
@media (max-width: 600px) {
#form-box {
width: 80%; } }
You can see how the form looks like in the image below: https://i.stack.imgur.com/THnot.png