Hello, newbie here
To keep it short i have a form with a title and a description, when i fill the form and submit it, i want to see the text i entered in displayed on the page.
When i submit the form, i get in my console an array of objects. I want to show in my page the value of the first property of the first object.
Do any of you know how i can do it ? (Sorry i can’t upload screenshots as a new registered user)
Here is the code of the component:
function Popup(props) {
const [inputFields, setInputField] = useState([
{ title: '',
description:''
},
]);
const [print, setPrint] = useState(false)
const handleChangeInput = (index, event) => {
const values = [...inputFields];
values[index][event.target.name] = event.target.value;
setInputField(values);
}
const handleSubmit = (e) => {
e.preventDefault();
console.log(inputFields);
}
return (props.trigger) ? (
<Wrapper>
<div className="popup">
<div className="popup-inner">
<button className="close-btn" onClick={() => props.setTrigger(false)}>close</button>
{ props.children }
<form onSubmit={handleSubmit}>
{ inputFields.map((inputField, index) =>(
<div key={index} className="containerfield">
<TextField
name="title"
label="Title"
className= "txtfield"
value={inputField.title}
onChange={event => handleChangeInput(index, event)}
/>
<TextField
name="description"
label="Description"
className= "txtfield2"
value={inputField.description}
onChange={event => handleChangeInput(index, event)}
/>
</div>
)) }
<button className="submit-btn" type="submit" onClick={handleSubmit}>
ADD TASK
</button>
</form>
</div>
</div>
</Wrapper>
) : "";
}
Thank you !