So I am trying to display the contents of three arrays in React in this fashion:
array[one,two]
array2[1,2]
array3[hi, bye]
what I want:
one
1
hi
two
2
bye
But I am ending up with
one
two
1
2
hi
bye
Here is the code and I am usnig paint info to map through and display. I tried nesting the ul's and the li's but not seeming to work... any advice would be greatly appreciated.
this.state = {
paintBrand: ['Sherwin-Williams'],
paintColor: ['Blue'],
paintSheen: ['Satin']
};
this.handleSubmit = this.handleSubmit.bind(this);
//Brads cool
}
handleSubmit(e) {
e.preventDefault();
var updateBrand = this.state.paintBrand;
updateBrand.push(this.refs.brand.value);
var updateColor = this.state.paintColor;
updateColor.push(this.refs.color.value);
var updateSheen = this.state.paintSheen;
updateSheen.push(this.refs.sheen.value);
this.setState({
paintBrand: updateBrand,
paintColor: updateColor,
paintSheen: updateSheen
});
}
render() {
var paintBrandArr = this.state.paintBrand;
paintBrandArr = paintBrandArr.map(brand =>
<li key={brand}>
{brand}
</li>
);
var paintColorArr = this.state.paintColor;
paintColorArr = paintColorArr.map(paint =>
<li key={paint}>
{paint}
</li>
);
var paintSheenArr = this.state.paintSheen;
paintSheenArr = paintSheenArr.map(sheen =>
<li key={sheen}>
{sheen}
</li>
);
return (
<div>
<form className="form" onSubmit={this.handleSubmit}>
<div className="row">
<div className="col-xs-4" />
<div className="col-xs-4">
<label htmlFor="brand">Paint Brand</label>
<div className="field">
<input
type="text"
name="brand"
className="form-control"
placeholder="Brand/Company"
ref="brand"
value={this.props.value}
onChange={this.props.onChange}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-4" />
<div className="col-xs-4">
<label htmlFor="color">Color</label>
<div className="field">
<input
type="text"
name="brand"
className="form-control"
placeholder="Color"
ref="color"
value={this.props.value}
onChange={this.props.onChange}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-4" />
<div className="col-xs-4">
<label htmlFor="brand">Sheen</label>
<div className="field">
<input
type="text"
name="brand"
className="form-control"
placeholder="Sheen"
ref="sheen"
value={this.props.value}
onChange={this.props.onChange}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-12"> </div>
<input
className="btn btn-primary btn-lg"
type="submit"
value="Input"
/>
</div>
</form>
<div>
<div>
<ul>
{paintBrandArr}
{paintColorArr}
{paintSheenArr}
</ul>
</div>
</div>
</div>
);
}
}
What you could do is map over one array and get info from all the three arrays through index like
var paintBrandArr = this.state.paintBrand;
paintBrandArr = paintBrandArr.map((brand, index) =>
<li key={brand}>
{brand}
{paintColorArr[index]}
{paintSheenArr[index]}
</li>
);
and then in render
<ul>
{paintBrandArr}
</ul>
Related
I am trying to create a register page where a user can add a profile picture as well as a background picture to their profile. I have installed the PrimeReact themes and templates to my node modules. However, the avatar doesn't want to fit it to where it can make a background image avatar. Instead, it just fits it as a circle just like the profile picture avatar instead of a rectangle fit as a background image avatar.
import {useState, useEffect } from 'react'
import Avatar from 'react-avatar-edit'
import {Dialog} from 'primereact/dialog'
import {InputText} from 'primereact/inputtext'
const initialState = {
company: '',
email: '',
password: '',
isMember: true,
}
const Register = () => {
const [imagecrop, setimagecrop] = useState(false);
const [image, setImage] = useState("");
const [src, setsrc] = useState(false);
const [profile, setProfile] = useState([]);
const [pview, setpview] = useState(false);
const profileFinal = profile.map((item) => item.pview);
const onClose = () => {
setpview(null);
};
const onCrop = (view) => {
setpview(view);
};
const saveCropImage = () => {
setProfile([...profile, { pview }]);
setimagecrop(false);
}
const [values, setValues] = useState(initialState)
// global state and useNavigate
const handleChange = (e) => {
console.log(e.target)
}
const onSubmit = (e) => {
e.preventDefault()
console.log(e.target)
}
return (
<body class="page-template-default page page-id-13">
<header class="site-header">
<div class="container">
<h1 class="school-logo-text float-left"><strong>Direct</strong> Connection</h1>
<div class="site-header__util">
</div>
</div>
</header>
<div class="page-banner">
<div class="page-banner__bg-image" style={ { backgroundImage: "url('connection.jpg')" } }></div>
<div class="page-banner__content container container--narrow">
<h1 class="page-banner__title">Add Your Company</h1>
<div class="page-banner__intro">
<p></p>
</div>
</div>
</div>
<div class="container container--narrow page-section">
<h2 class="headline headline--tiny">Want to join and connect with companies? Sign up and get your company out there:</h2>
<label class="profile-pic">Profile Photo:</label>
<div class="profile-img">
<Dialog
visible={imagecrop}
header={() => (
<p htmlFor="" class="text 2xl font-semibold textColor">
</p>
)}
onHide={() => setimagecrop(false)}
></Dialog>
<div class="confirmation-content flex flex-column align-items-center">
<Avatar
width={500}
height={400}
onCrop={onCrop}
onClose={onClose}
src={src}
shadingColor={"#474649"}
backgroundColor={"#474649"}
></Avatar>
<div class="flex flex-column align-items-center mt-5 w-12">
<div class="flex justify-content-around w-12 mt-4">
</div>
</div>
<InputText
type="file"
accept='/image/*'
style={{ display: "none" }}
onChange={(event)=>{
const file = event.target.files[0];
if(file && file.type.substring(0,5)==="image"){
setImage(file);
}else{
setImage(null)
}
}}
/>
</div>
</div>
<script src="profile-pic.js"></script>
<label class="profile-back">Background Photo:</label>
<div>
<Dialog
visible={imagecrop}
header={() => (
<p htmlFor="" class="text 2xl font-semibold textColor">
</p>
)}
onHide={() => setimagecrop(false)}
></Dialog>
<Avatar
width={1000}
height={400}
onCrop={onCrop}
onClose={onClose}
src={src}
shadingColor={"#474649"}
backgroundColor={"#474649"}
></Avatar>
<InputText
type="file"
accept='/image/*'
style={{ display: "none" }}
onChange={(event)=>{
const file = event.target.files[0];
if(file && file.type.substring(0,5)==="image"){
setImage(file);
}else{
setImage(null)
}
}}
/>
<img class="background-image" src=""></img>
</div>
<div class="company-info-container page-section">
<label class="company-name">Company Name</label>
<div class="company-input">
<input text="headline headline--input" placeholder="Enter Company"></input>
</div>
<label class="company-email">Email</label>
<div class="email-input">
<input text="headline headline--input" placeholder="Enter Email"></input>
</div>
<label class="company-address">Company Address</label>
<div class="address-input">
<input text="headline headline--input" placeholder="Enter Address"></input>
</div>
<label class="company-city">City</label>
<div class="city-input">
<input text="headline headline--input" placeholder="Enter City"></input>
</div>
<label class="company-zip">Zip Code</label>
<div class="zip-input">
<input text="headline headline--input" placeholder="Enter Zip"></input>
</div>
<label class="company-password">Password</label>
<div class="password-input">
<input text="headline headline--input" placeholder="Enter Password"></input>
</div>
<label class="company-password">Retype Password</label>
<div class="reword-input">
<input text="headline headline--input" placeholder="Re Password"></input>
</div>
<label class="company-description">Tell us about your company and what you do!</label>
<div class="description-input">
<textarea rows="5" cols="80" id="TITLE" text="headline headline--input" placeholder="Description"></textarea>
</div>
</div>
<button type="button" class="btn btn--large btn--orange push-right">Add Your Company</button>
</div>
<footer class="site-footer">
<div class="site-footer__inner container container--narrow">
<div class="group">
<div class="site-footer__col-one">
<h1 class="school-logo-text school-logo-text--alt-color">
<strong>Direct</strong> Connection
</h1>
<p><a class="site-footer__link" href="index.html">706-263-0175</a></p>
</div>
</div>
</div>
</footer>
</body>
)
}
export default Register
I have tried looking at how primereact avatars can reshape the circle to rectangle to fit the image to a background image but I don't see many ways of how it can be reshaped.
I'm trying to create this 3 button but I can't create third button because I don't know how use multiple useState in React Js.
This is my code :
const ShowOrNot = () => {
const [showForm, setShowForm] = useState(false);
const [showPreview , setShowPreview] = useState(false)
return (
<div className="col-12">
{showForm ? (
<div className={"content-send-form-wrapper"} id="scrollbar-style">
<div className={"content-send-form-header"}>
<div className={"content-send-form-header-title"}>
</div>
<h2>
New Upload
</h2>
<div className={"content-send-form-close-btn"}>
<button onClick={() => setShowForm(false)} className={"close-modal-btn"}>
Close <span></span>
</button>
</div>
</div>
<form className={"mt-3 content-send-form-data register-teacher-inputs-box "}>
<Row>
<div className={"col-lg-6 col-12 mt-4"}>
<label
htmlFor={"name"} className={" text-right"}>
<span>*</span>
</label>
<input type="text" className="form-control" placeholder={"عنوان"}
name={""} required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => e.target.placeholder = "عنوان"}
onFocus={(e) => e.target.placeholder = ""}
/>
</div>
<div className={"col-lg-6 col-12 mt-4"}>
<label
htmlFor={"country"} className={" text-right"}>
<span>*</span>
</label>
<input type="text" className="form-control" placeholder={"دسته بندی"}
name={"country"}
// value={this.country}
// onChange={this.onChange}
required="true"
onBlur={(e) => e.target.placeholder = "دسته بندی"}
onFocus={(e) => e.target.placeholder = ""}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3">
<label
htmlFor={"name"} className={"label-full-size text-right"}>
<span>*</span>
</label>
<input type="text" className="form-control" placeholder={"خلاصه توضیحات"}
name={""} required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => e.target.placeholder = "خلاصه توضیحات"}
onFocus={(e) => e.target.placeholder = ""}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3">
<label
htmlFor={"name"} className={"label-full-size text-right textarea-label"}>
<span>*</span>
</label>
<textarea className="video-text-form form-control" placeholder={"متن ویدیو"}
name={""} required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => e.target.placeholder = "متن ویدیو"}
onFocus={(e) => e.target.placeholder = ""}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3 video-upload-input-btn">
<VideoUpload />
</div>
</Row>
<Row>
<div className="col-lg-6 col-12 mt-3">
<PosterUpload />
</div>
<div className="col-lg-6 col-12 mt-3">
<CoverUpload />
</div>
</Row>
</form>
{showPreview ? (
<div>
show preview
</div>
) : (<Row>
<div className="col-lg-8 col mt-3">
<button className="preview-send-data-btn" onClick={function(event){ setShowPreview(true); setShowForm(true)}}>
Preview
</button>
</div>
<div className="col-lg-4 col mt-3">
<button className="draft-send-data-btn">
Draft
</button>
</div>
</Row>)}
</div>
) : (
<div>
<button className="upload-content-btn w-100" onClick={() => setShowForm(true)}>
<span className="ml-2">
</span>New Upload </button>
</div>
)}
</div>
);
};
ReactDOM.render(<ShowOrNot />, document.getElementById("root"))
I want when click on Preview button showFrom not show and other form that in showPreview display instead. My problem is not about CSS and just I don't know how to use useState like before steps I used it.
In your example Preview inside of Form, so if you hide form preview will be hidden too.
You need to properly organize components so your code will be easy to read and understand. Without that you can not solve any complex enough task.
Can start like this.
const ShowOrNot = () => {
const [showForm, setShowForm] = useState(false);
const [showPreview, setShowPreview] = useState(false);
const [formHidden, setFormHidden] = useState(false);
return (
<div className="col-12">
{!showForm ? (
<ShowFormButton onClick={() => setShowForm(true)} />
) : undefined}
{showForm ? (
<div className={'content-send-form-wrapper'} id="scrollbar-style">
<div className={'content-send-form-header'}>
<div className={'content-send-form-header-title'}></div>
<h2>New Upload</h2>
<HideFormButton
onClick={() => {
setShowForm(false);
}}
/>
</div>
{!formHidden ? <MyForm /> : undefined}
{!showPreview ? (
<ShowPreviewButton
onClick={() => {
setShowPreview(true);
setFormHidden(true);
}}
/>
) : undefined}
{showPreview ? (
<div>
Preview
<SendButton
onClick={() => {
setFormHidden(false);
setShowPreview(false);
setShowForm(false);
}}
/>
</div>
) : undefined}
</div>
) : undefined}
</div>
);
};
function SendButton({ onClick }) {
return (
<div>
<button className=" w-100" onClick={onClick}>
<span className="ml-2"></span>Send
</button>
</div>
);
}
function ShowFormButton({ onClick }) {
return (
<div>
<button className="upload-content-btn w-100" onClick={onClick}>
<span className="ml-2"></span>New Upload{' '}
</button>
</div>
);
}
function ShowPreviewButton({ onClick }) {
return (
<Row>
<div className="col-lg-8 col mt-3">
<button className="preview-send-data-btn" onClick={onClick}>
Preview
</button>
</div>
<div className="col-lg-4 col mt-3">
<button className="draft-send-data-btn">Draft</button>
</div>
</Row>
);
}
function HideFormButton({ onClick }) {
return (
<div className={'content-send-form-close-btn'}>
<button onClick={onClick} className={'close-modal-btn'}>
<span>Close</span>
</button>
</div>
);
}
function MyForm() {
return (
<form
className={'mt-3 content-send-form-data register-teacher-inputs-box '}
>
<Row>
<div className={'col-lg-6 col-12 mt-4'}>
<label htmlFor={'name'} className={' text-right'}>
<span>*</span>
</label>
<input
type="text"
className="form-control"
placeholder={'عنوان'}
name={''}
required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => (e.target.placeholder = 'عنوان')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
<div className={'col-lg-6 col-12 mt-4'}>
<label htmlFor={'country'} className={' text-right'}>
<span>*</span>
</label>
<input
type="text"
className="form-control"
placeholder={'دسته بندی'}
name={'country'}
// value={this.country}
// onChange={this.onChange}
required="true"
onBlur={(e) => (e.target.placeholder = 'دسته بندی')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3">
<label htmlFor={'name'} className={'label-full-size text-right'}>
<span>*</span>
</label>
<input
type="text"
className="form-control"
placeholder={'خلاصه توضیحات'}
name={''}
required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => (e.target.placeholder = 'خلاصه توضیحات')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3">
<label
htmlFor={'name'}
className={'label-full-size text-right textarea-label'}
>
<span>*</span>
</label>
<textarea
className="video-text-form form-control"
placeholder={'متن ویدیو'}
name={''}
required="true"
// value={this.name}
// onChange={this.onChange}
onBlur={(e) => (e.target.placeholder = 'متن ویدیو')}
onFocus={(e) => (e.target.placeholder = '')}
/>
</div>
</Row>
<Row>
<div className="col-12 mt-3 video-upload-input-btn">
<VideoUpload />
</div>
</Row>
<Row>
<div className="col-lg-6 col-12 mt-3">
<PosterUpload />
</div>
<div className="col-lg-6 col-12 mt-3">
<CoverUpload />
</div>
</Row>
</form>
);
}
ReactDOM.render(<ShowOrNot />, document.getElementById('root'));
you should use setState like this code
setShowForm(false) or setShowForm(true)
and
setShowPreview(true) or setShowPreview(false)
I have a Component that causes an error, "TypeError: Cannot read property 'value' of null". It's nested inside of another component, and makes that component not load.
This is the code:
const NewItem = (props) => {
const qty = "QuantityBox" + props.identifier.toString();
const prc = "PriceBox" + props.identifier.toString();
return(
<div className="NewItem">
<div className="ItemNameInput">
<p className="InputLabel">Item Name</p>
<input className="inputFull" type="text" />
</div>
<div className="QuantityAndPrice">
<div className="QuantityInput">
<p className="InputLabel">Qty</p>
<input className="inputEighth" value="1" id={qty} type="text" />
</div>
<div className="PriceInput">
<p className="InputLabel">Price</p>
<input className="inputFourth" value="0" id={prc} type="text" />
</div>
<div className="TotalOutput">
<p className="InputLabel">Total</p>
<h4 className="TotalAmount">{(document.getElementById(qty).value * document.getElementById(prc).value).toFixed(2)}</h4>
</div>
<img src={TrashCan} alt="Delete" />
</div>
</div>
)
}
Right in the "TotalAmount" h4, is where the problem arises. If I remove that part, it loads up just fine. Judging from the error, it can't find the elements I'm specifying, but I don't understand why. I don't know if it has anything to do with the parent component, but I'll put it here just in case:
class NewInvoice extends Component {
constructor(props) {
super(props)
this.state = {
numberOfItems: [0]
};
}
createItem = () => {
this.setState(prevState => ({numberOfItems: [...prevState.numberOfItems, (this.state.numberOfItems.length - 1)]}));
}
render() {
return(
<div className="NewInvoice">
<button onClick={() => this.props.goBackInvoiceList()} className="goBack">Go back</button>
<h1>New Invoice</h1>
<form>
<p className="FormAreaLabel">Bill From</p>
<div className="BillFrom">
<div className="StreetAddressInput">
<p className="InputLabel">Street Address</p>
<input className="inputFull" type="text" />
</div>
<div className="HalfInput">
<div className="CityInput">
<p className="InputLabel">City</p>
<input className="inputHalf" type="text" />
</div>
<div className="PostCodeInput">
<p className="InputLabel">Post Code</p>
<input className="inputHalf" type="text" />
</div>
</div>
<div className="NewCountryInput">
<p className="InputLabel">Country</p>
<input className="inputFull" type="text" />
</div>
</div>
<div className="BillTo">
<div className="ClientNameInput">
<p className="InputLabel">Client's Name</p>
<input className="inputFull" type="text" />
</div>
<div className="ClientEmailInput">
<p className="InputLabel">Client's Email</p>
<input className="inputFull" type="text" />
</div>
<div className="ClientStreetAddressInput">
<p className="InputLabel">Street Address</p>
<input className="inputFull" type="text" />
</div>
<div className="HalfInput">
<div className="ClientCityInput">
<p className="InputLabel">City</p>
<input className="inputHalf" type="text" />
</div>
<div className="ClientPostCodeInput">
<p className="InputLabel">Post Code</p>
<input className="inputHalf" type="text" />
</div>
</div>
<div className="ClientCountryInput">
<p className="InputLabel">Country</p>
<input className="inputFull" type="text" />
</div>
</div>
<div className="OtherInfo">
<div className="InvoiceDateInput">
<p className="InputLabel">Invoice Date</p>
<input className="inputFull" type="text" />
</div>
<div className="PaymentTermsInput">
<p className="InputLabel">Payment Terms</p>
<input className="inputFull" type="text" />
</div>
<div className="ProjectDescriptionInput">
<p className="InputLabel">Project Description</p>
<input className="inputFull" type="text" />
</div>
</div>
<h3 className="ItemListTitle">Item List</h3>
<div className="ItemList">
{this.state.numberOfItems.map((index) =>
<NewItem key={index} identifier={index} />
)}
<button onClick={() => this.createItem()} className="AddNewItem">+ Add New Item</button>
</div>
</form>
<div className="NewInvoiceEndButtons">
<button className="Discard">Discard</button>
<button className="SaveAsDraft">Save As Draft</button>
<button className="SaveAndSend">Save And Send</button>
</div>
</div>
)
}
}
This is happening because in the h4 line that you specified, you are trying to retrieve a DOM node with the id "QuantityBox" + props.identifier.toString(). Your code is unable to retrieve a DOM element with a matching id, causing document.getElementById(qty) to return null. null doesn't have any properties, so document.getElementById(qty).value is throwing an error specifiying that it cant access property value of null.
Also, if you want to manipulate DOM elements directly, the React way is to use React Refs. You should be able to achieve your desired result with that.
Read more on Refs here: https://reactjs.org/docs/refs-and-the-dom.html
<div className="col-md-12">
<div className="row">
{shopeeship.map(function (key,value) {
if(key.enabled){
console.log("yes");
<div className="col-md-6">
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>
}})}
</div>
</div>
I have some data and want to loop through it to render some UI. In the above code I tried to loop the data and I checked that if the key enabled then to echo the html value. It successfully prints yes in console log but the html does not render as expected. Anyone has faced such an issue before? Please help.
It's because you forgot to return your html from loop
Do this
<div className="col-md-12">
<div className="row">
{shopeeship.map(function (key,value) {
if(key.enabled){
console.log("yes");
return(
<div className="col-md-6">
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>
)
}})}
</div>
</div>
You are not returning from map, you can use arrow function instead for implicit return as
<div className="col-md-12">
<div className="row">
{shopeeship.map((key,value) => key.enabled &&
(<div className="col-md-6">
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>)
)}
</div>
</div>
Hope it helps
you need to return the html part, map creates a new array and expects a return value else your array will be filled with null values, hence you would need to return the said html part.
Try this simplified solution using ternary condition and arrow function.
<div className="col-md-12">
<div className="row">
{shopeeship.map((key,value)=> key.enabled ?
<div className="col-md-6" key={value}>
<div className="form-group">
<span className="mr-4 pr-4">
<IntlMessages id="shopee.poswm" />
</span>
<label className="pull-right" title="">
<Switch/>
</label>
</div>
</div>
:null)}
</div>
</div>
I'm trying to create an img uploader inside my ReduxForm that will only accept imgs that are .png and no larger than 210x210 and 2mb. Also, the design says to swap the placeholder img with the uploaded file which I'm also struggling with. Here's my code:
renderProfileImgUpload(field) {
const { meta: { touched, error }, label, name, accept, type } = field;
return (
<div>
<div className="login__fieldError">
<small>{touched ? error : ''}</small>
</div>
<label htmlFor="img-upload">
<img src="imgs/profile-select.png" className="img-responsive" alt="" />
</label>
<input type={type} name={name} accept={accept} id="img-upload" />
</div>
)
}
render() {
const { handleSubmit, showNextRegistration, showPreviousRegistration } = this.props;
return (
<div className="widgetFull--white">
<div className="align-middle row registration--fullHeight">
<div className="columns small-3">
<img
src="imgs/account-arrow-left.png"
alt="menu"
className="img-responsive"
onClick={showPreviousRegistration}
/>
</div>
<div className="columns small-6">
<h2 className="registration__header">Edit account</h2>
</div>
<div className="columns small-3">
<h3 className="registration__index">2 of 2</h3>
</div>
<form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
<div className="columns small-3">
<Field label="Profile Image" type="file" name="image" accept="image/.png" component={this.renderProfileImgUpload} />
</div>
<div className="columns small-6">
<Field label="Username" type="screenname" name="screenname" component={this.renderUsernameField} />
</div>
<div className="columns small-6">
<Field label="First Name" type="firstName" name="firstName" component={this.renderFirstNameField} />
</div>
<div className="columns small-6">
<Field label="Last Name" type="lastName" name="lastName" component={this.renderLastNameField} />
</div>
<div className="columns small-12">
<button className="button expanded registration__btn" type="button">Next</button>
</div>
</form>
</div>
</div>
)
}
Currently I'm unsure whether it would be better to try and do the validation when uploading the img, or inside the handle submit function. Thanks for your help!