is it possible to make the antd FormItem flexiable - javascript

I am using FormItem as the app UI table filter condition, and using Row and Col to layout the component. Current I am facing a problem that when user scale the window, the FormItem could not auto fit the screen resize. So I want to make the FormItem flexiable, when user scale the broswer window, the FormItem could auto rearrangement to multiline to fit the screen change automatically. This is the code current I am using:
renderSimpleForm() {
const {
form,
dispatch,
loading,
activityM: { wordItems = [] },
activityM,
} = this.props;
const { getFieldDecorator } = form;
const {
formValues: { goodWord },
} = this.state;
return (
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={16} justify="start">
<Col md={5} sm={24}>
<FormItem label="create date：">
{getFieldDecorator('activityCreateTime', {
})(<RangePicker className={styles.rangepicker} format={dateFormat} />)}
</FormItem>
</Col>
<Col md={5} sm={24}>
<FormItem label="activity date：">
{getFieldDecorator('activityTime', {
})(<RangePicker className={styles.rangepicker} format={dateFormat} />)}
</FormItem>
</Col>
<Col md={3} sm={24}>
<FormItem label="activity status:">
{getFieldDecorator('activityStatus', {
initialValue: '',
})(
<Select placeholder="please choose" style={{ width: 85 }} onSelect={this.onChoseHouse}>
<Option value="">all</Option>
{getSelectOptionByArr(questionType)}
</Select>
)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="user：">
{getFieldDecorator('name', {
initialValue: this.state.formValues.name,
rules: [{ required: false }],
})(<Input type="text" placeholder="creator" />)}
</FormItem>
</Col>
<Col md={2} sm={20}>
<Button type="primary" shape="round" htmlType="submit" className="fun-button">
search
</Button>
</Col>
</Row>
</Form>
);
}
what should I do to make the FormItem items flexiable?


I define different size with different devcie right now like this with each col:
<Col xs={24} sm={12} md={12} lg={12} xl={8} xxl={5}>
<FormItem label="create date：">
{getFieldDecorator('activityCreateTime', {
})(<RangePicker className={styles.rangepicker} format={dateFormat} />)}
</FormItem>
</Col>

Related

How to enable/disable form elements in a list generated by a loop in ReactJS?

I have a loop in react to generate a list of input text and select, specifically two inputs and a select for each line
const getRow = (type, key, defaultValues = {}) => {
return (
<Row className="mb-3" key={type + key}>
<Col xs={3}>
<Form.Group>
<Form.Label>Name</Form.Label>
<Form.Control
name={`${type}name${key}`}
className={`${type}name`}
defaultValue={defaultValues ? defaultValues.name : null}
type="text"/>
</Form.Group>
</Col>
<Col>
<Form.Group>
<Form.Label>Values</Form.Label>
<Form.Control
name={`${type}value${key}`}
className={`${type}value`}
defaultValue={defaultValues ? defaultValues.value : null}
type="text"/>
</Form.Group>
</Col>
<Col xs={3}>
<Form.Group>
<Form.Label>Type</Form.Label>
<Form.Select
name={`${type}type${key}`}
className={`${type}type`}
defaultValue={defaultValues ? defaultValues.type : null}
>
<option value="single">Single</option>
<option value="multi">Multi</option>
<option value="date">Date</option>
</Form.Select>
</Form.Group>
</Col>
</Row>
What I am trying to do is to have the second input text (value) disabled when I select Date in the type select. The tricky point is to disable the one in the same line.
How can I do that please?

I don't know what data your key variables have? But i presume that they are unique as you named them key. You can create an object hold the state of the disabledElements like this:
{
textvalueMyCoolKey: true,
textValueMyThirdCoolKey: true
}
Then check if your disabled element is in that object. So it could look like this. You didn't post much of your code so I can't give you a component that works, but this tells the idea:
const [disabledElements, setDisabledElements] = useState({});
const setDisabledText = (e, key) => {
const value = e.target.value;
const disabled = value === 'date';
setDisabledElements({...disabledElements, [key]: disabled});
}
useEffect(() => {
}, [disabledElements]);
const getRow = (type, key, defaultValues = {}) => {
return (
<Row className="mb-3" key={type + key}>
<Col xs={3}>
<Form.Group>
<Form.Label>Name</Form.Label>
<Form.Control
name={`${type}name${key}`}
className={`${type}name`}
defaultValue={defaultValues ? defaultValues.name : null}
type="text"/>
</Form.Group>
</Col>
<Col>
<Form.Group>
<Form.Label>Values</Form.Label>
<Form.Control
name={`${type}value${key}`}
className={`${type}value`}
disabled={disabledElements[`${type}value${key}`]}
defaultValue={defaultValues ? defaultValues.value : null}
type="text"/>
</Form.Group>
</Col>
<Col xs={3}>
<Form.Group>
<Form.Label>Type</Form.Label>
<Form.Select
name={`${type}type${key}`}
className={`${type}type`}
onChange={(e) => setDisabledText(e, `${type}value${key}`)}
defaultValue={defaultValues ? defaultValues.type : null}
>
<option value="single">Single</option>
<option value="multi">Multi</option>
<option value="date">Date</option>
</Form.Select>
</Form.Group>
</Col>
</Row>
)
}
Also I presumed that you want to remove the disabled state from the text field if the user deselects the date option.

React hook form handlesubmit doesn't work

Hey guys ı have some issues react hook form handle submit function doesn't work what is issue can you help ?
const AccountTabs = ({ userDetail }) => {
const { register, handleSubmit } = useForm();
console.log(userDetail)
const onSubmit = (data) => {
alert(JSON.stringify(data));
console.log(data)
}
return (
<Fragment>
<Card>
<CardHeader className='border-bottom'>
<CardTitle tag='h4'>İşletme Ayarları</CardTitle>
</CardHeader>
<CardBody className='py-2 my-25'>
<div className='d-flex'>
<div className='me-25'>
<img className='rounded me-50' alt='İşletmeye ait logo ' height='100' width='100' />
</div>
<div className='d-flex align-items-end mt-75 ms-1'>
<div>
<Button tag={Label} className='mb-75 me-75' size='sm' color='primary'>
Yükle
<Input type='file' hidden accept='image/*' />
</Button>
<Button className='mb-75' color='secondary' size='sm' outline >
Sil
</Button>
<p className='mb-0'> JPG veya PNG türünde yükleme yapınız</p>
</div>
</div>
</div>
<Form className='mt-2 pt-50' onSubmit={(e) => { e.preventDefault(); handleSubmit(onSubmit) }} >
<Row>
<Col sm='6' className='mb-1'>
<Label className='form-label' > Ad Soyadı </Label>
<Input defaultValue={userDetail.name} {...register("name", { required: true })} />
</Col>
<Col sm='6' className='mb-1'>
<Label className='form-label' > Kullanıcı adı </Label>
<Input defaultValue={userDetail.username} {...register("kullanici", { required: true })} />
</Col>
<Col sm='6' className='mb-1'>
<Label className='form-label' > E-mail </Label>
<Input type='email' defaultValue={userDetail.contact.email} {...register("email", { required: true })} />
</Col>
<Col sm='6' className='mb-1'>
<Label className='form-label' > İşletme Adı </Label>
<Input defaultValue={userDetail.companyName} {...register("companyName", { required: true })} />
</Col>
<Col sm='6' className='mb-1'>
<Label className='form-label' > Telefon Numarası </Label>
<Cleave
value={userDetail.contact.phone}
{...register("phone", { required: true })}
className='form-control'
options={{ phone: true, phoneRegionCode: 'TR' }}
/>
</Col>
<Col sm='6' className='mb-1'>
<Label className='form-label' > Adres</Label>
<Input defaultValue={userDetail.contact.address} {...register("address", { required: true })} />
</Col>
<Col className='mt-2' sm='12'>
<input type='submit' className='me-1' value='Kaydet' />
</Col>
</Row>
</Form>
</CardBody>
</Card>
</Fragment>
)
}
export default AccountTabs
form can submit but onSubmit function doesn't work what is problem i am ussed first time react-hook-form library, form can submit but onSubmit function doesn't work what is problem i am ussed first time react-hook-form library,form can submit but onSubmit function doesn't work what is problem i am ussed first time react-hook-form library

handleSubmit fires submit function only when validation is successful, So please see if all the required data is filled when you submit the form ( or handle the validations).
const AccountTabs = ({ userDetail }) => {
const { register, handleSubmit, formState } = useForm();
console.log(userDetail)
const onSubmit = (data) => {
alert(JSON.stringify(data));
console.log(data)
}
// formstate has the errors
console.log(formState.errors);
return (
<Fragment>
//code
</Fragment>
)
}
Check this link for validtions

how to change default fields of Form.List in antd pro

how I can add my own fields to fill it in the form list
<Form.List
name="products"
>
{(data, { add, remove }) => {
console.log(data);
return (
<>
{data.map((product) => (
<>
<Col span={3} offset={2}>
<Form.Item
name={['referralNumber']}
rules={[{ required: true, message: 'Missing first name' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={1} offset={1}>
<DeleteOutlined onClick={() => remove(product.id)} />
</Col>
<Divider />
</>
))}
<Col span={24}>
<Form.Item>
<Button type="dashed" onClick={add} block icon={<PlusOutlined />}>
افزودن کالا
</Button>
</Form.Item>
</Col>
</>
);
}}
</Form.List>
i wnat to have access to filed like this interface
export interface CreateReceiptItemDto {
receiptId: number;
productId: number;
initialMainQuantity: number;
initialSubQuantity: number;
referralNumber: string;
}
but i always get something like this and its defin in node_modules like this
import * as React from 'react';
import { ValidatorRule, StoreValue } from 'rc-field-form/lib/interface';
export interface FormListFieldData {
test: number;
test2: number;
fieldKey: number;
}
export interface FormListOperation {
add: (defaultValue?: StoreValue, insertIndex?: number) => void;
remove: (index: number | number[]) => void;
move: (from: number, to: number) => void;
}
export interface FormListProps {
prefixCls?: string;
name: string | number | (string | number)[];
rules?: ValidatorRule[];
initialValue?: any[];
children: (fields: FormListFieldData[], operation: FormListOperation, meta: {
errors: React.ReactNode[];
}) => React.ReactNode;
}
declare const FormList: React.FC<FormListProps>;
export default FormList;
i think i need something to overwrite this definition or something like that to customize it

i fond this way to create an array of object by my own model by iterate a form with my name then filed name in that's form and submit i get my model as an array
<Form.List
name="products"
initialValue={[{ id: 1, name: 'test', mainUnit: '2213', subUnit: '21312' }]}
>
{(data, { add, remove }) => {
console.log(data);
return (
<>
{data.map((product) => (
<>
<Form name="test">
<Col span={2}>
<Form.Item
name={['id']}
rules={[{ required: true, message: 'Missing first name' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={5} offset={2}>
<Form.Item
name={'name'}
rules={[{ required: true, message: 'Missing first name' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={2} offset={2}>
<Form.Item
name={'mainUnit'}
fieldKey={'mainUnit'}
rules={[{ required: true, message: 'Missing first name' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={2} offset={2}>
<Form.Item
name={'subUnit'}
rules={[{ required: true, message: 'Missing first name' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={3} offset={2}>
<Form.Item
name={['referralNumber']}
rules={[{ required: true, message: 'Missing first name' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={1} offset={1}>
<DeleteOutlined onClick={() => remove(product.id)} />
</Col>
<Divider />
</Form>
</>
))}
<Col span={24}>
<Form.Item>
<Button type="dashed" onClick={add} block icon={<PlusOutlined />}>
افزودن کالا
</Button>
</Form.Item>
</Col>
</>
);
}}
</Form.List>

You can set values with initialValue props.
InitialValue props will set your fields defaultValue.
A Multiple value can set below code example:
<Form.List
name="products"
initialValue={[{ id: 5, name: 'example', mainUnit: '77', subUnit: '777' }]}
>
A single value can set below code example:
<Form.Item
name={['id']}
initialValue="5"
rules={[{ required: true, message: 'Missing first name' }]}
>
You can try with your preference values with single or multiple.

Dynamically second field select value based on first select value

I am using React and Formik. I have initial values set.
initialValues={{
Department: "",
Category: "",
}}
Department and Category are material ui menus dependent on each other. If user selects a value from Department then Related categories will get updated.
New we get new initial values from api like this
initialValues={{
Department: "IT",
Category: "Forgot Password",
}}
Values are being set for both menus. but Category is not being filled as its data is being populated on change of Department. How to trigger change so that Categories will get values and i can set the data which i got from api.
Formik code
<Formik
enableReinitialize={true}
initialValues={{
Department: "IT",
Category: "Forgot Password",
}}
innerRef={formRef}
validateOnChange={true}
validateOnBlur={false}
validate={values => { }}
>
{({ values, touched, errors, handleChange, handleBlur, isValid, setFieldValue }) => (
<Form noValidate autoComplete="off" >
<Grid container spacing={3}>
<Grid item lg={4} xs={12}>
<FormControl className={classes.fullWidth} error={Boolean(errors.Department && touched.Department)}>
<InputLabel id="Department">Department</InputLabel>
<Select
name="Department"
labelId="Department"
id="Department"
onChange={(e, value) => {
setFieldValue('Department', value === null ? "" : value.props.value);
setFieldValue('Category', "");
departmentChange(value.props.value);
}}
fullWidth
value={values.Department}
>
{departmentList && departmentList.map((department, index) => {
return (
<MenuItem key={index} value={department.Department}>{department.Department}</MenuItem>
)
})}
</Select>
<FormHelperText className={classes.error}>{(errors.Department && touched.Department) && errors.Department}</FormHelperText>
</FormControl>
</Grid>
<Grid item lg={4} xs={12}>
<FormControl className={classes.fullWidth} error={Boolean(errors.Category && touched.Category)}>
<InputLabel id="Category">Category</InputLabel>
<Select
name="Category"
labelId="Category"
id="Category"
onChange={handleChange}
fullWidth
value={values.Category}
>
{categoryList && categoryList.map((category, index) => {
return (
<MenuItem key={index} value={category.Category}>{category.Category}</MenuItem>
)
})}
</Select>
<FormHelperText className={classes.error}>{(errors.Category && touched.Category) && errors.Category}</FormHelperText>
</FormControl>
</Grid>
<Grid item lg={12} xs={12} align="right">
<div className={classes.wrapper}>
<Button
className={classes.button}
type="submit"
color="primary"
variant="contained"
disabled={showButtonLoader}
>
submit
</Button>
{showButtonLoader && <CircularProgress size={24} className={classes.buttonProgress} />}
</div>
</Grid>
</Grid>
</Form>)}
</Formik>

Create the clone of a card element with an onClick button

I am having troubles with my code and can't find a solution to it, basically i'm trying to clone a card element when clicking on a 'plus' button, to 'add a member'. I am working with react-redux.
I wanna be able to add two other members (no more) with different datas in each of them which is why I have done three, so this is what I got in my store:
team :[{
Firstname: "",
Age: "",
Role: "",
Statut: "",
Money: "",
Formation: 0,
Experience: 0,
Reseau: 0,
Rating: 0,
},
{
Firstname1: "",
Age1: "",
Role1: "",
Statut1: "",
Money1: "",
Formation1: 0,
Experience1: 0,
Reseau1: 0,
Rating1: 0,
},
{
Firstname2: "",
Age2: "",
Role2: "",
Statut2: "",
Money2: "",
Formation2: 0,
Experience2: 0,
Reseau2: 0,
Rating2: 0,
}
]
And this is what is in my component (the <link>/<button> is at the very end of the code):
class TeamEditor extends Component{
render() {
return(
// BACKGROUND CARD //
<div className="mr-2">
<Card className= "Editor-card">
<Row>
<Col md={4}>
<CardHeader className="card-header-warning card-header-icon">
<div className="card-icon card-icon-team">
<img src={process.env.PUBLIC_URL + '../assets/images/001-trade.svg' } width="40px" className="icon" alt="icon"/>
</div>
<h3 className="float-left card-category mt-2"><span className="text-team">Notre équipe</span></h3>
</CardHeader>
</Col>
<Col md={8} >
<NavLink to="/" className="d-flex justify-content-end mt-0">
<Button className= "mt-3">Enregistrer et quitter</Button>
</NavLink>
</Col>
</Row>
{/* CARD NUMBER ONE */}
<Card className="InsideCard">
<CardBody>
<Form>
<Row className="d-flex justify-content-around">
<Col md={2}>
<FormGroup>
<Label for="examplePrenom">Mon Prénom</Label>
<Input type="Prenom" name="Prenom" id="examplePrenom" value={this.props.Firstname} onChange={this.props.setFirstname}/>
</FormGroup>
</Col>
<Col md={1}>
<FormGroup>
<Label for="examplePassword">Mon âge</Label>
<Input type="Age" name="Age" id="exampleAge" value={this.props.Age} onChange={this.props.setAge} />
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="exampleFonction">Ma fonction</Label>
<Input type="Fonction" name="Fonction" id="exampleFonction" value={this.props.Role} onChange={this.props.setRole} />
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label className="labelForm" for="StatutSocial">Mon statut</Label>
<Input type="select" name="StatutSocial" id="StatutSocial" value={this.props.Statut} onChange={this.props.setStatut}>
<option>Actionnaire</option>
<option>Gérant.e ou co Gérant.e</option>
<option>Salarié.e</option>
<option>Soutien</option>
</Input>
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="Finance">Mes attentes financière</Label>
<Input type="Finance" name="Attente Financiere" id="Finance" value={this.props.Money} onChange={this.props.setMoney}/>
</FormGroup>
</Col>
</Row>
</Form>
<Row className="d-flex justify-content-around mt-3" >
<p className= "Passion">Passion</p>
<p className= "Passion">Expérience</p>
<p className= "Passion">Réseau</p>
<p className= "Passion">Formation</p>
</Row>
<Row className="d-flex justify-content-around">
<ReactStars value={this.props.Passion} onChange={this.props.setPassion} count={4} size={20} color2={'#ffd700'} />
<ReactStars value={this.props.Experience} onChange={this.props.setExperience} count={4} size={20} color2={'#ffd700'} />
<ReactStars value={this.props.Reseau} onChange={this.props.setReseau} count={4} size={20} color2={'#ffd700'} />
<ReactStars value={this.props.Formation} onChange={this.props.setFormation} count={4} size={20} color2={'#ffd700'} />
</Row>
</CardBody>
</Card>
{/* CARD NUMBER TWO */}
<Card className="InsideCard">
<CardBody>
<Form>
<Row className="d-flex justify-content-around">
<Col md={2}>
<FormGroup>
<Label for="examplePrenom">Mon Prénom</Label>
<Input type="Prenom" name="Prenom" id="examplePrenom" value={this.props.Firstname1} onChange={this.props.setFirstname1}/>
</FormGroup>
</Col>
<Col md={1}>
<FormGroup>
<Label for="examplePassword">Mon âge</Label>
<Input type="Age" name="Age" id="exampleAge" value={this.props.Age1} onChange={this.props.setAge1} />
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="exampleFonction">Ma fonction</Label>
<Input type="Fonction" name="Fonction" id="exampleFonction" value={this.props.Role1} onChange={this.props.setRole1} />
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label className="labelForm" for="StatutSocial">Mon statut</Label>
<Input type="select" name="StatutSocial" id="StatutSocial" value={this.props.Statut1} onChange={this.props.setStatut1}>
<option>Actionnaire</option>
<option>Gérant.e ou co Gérant.e</option>
<option>Salarié.e</option>
<option>Soutien</option>
</Input>
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="Finance">Mes attentes financière</Label>
<Input type="Finance" name="Attente Financiere" id="Finance" value={this.props.Money1} onChange={this.props.setMoney1}/>
</FormGroup>
</Col>
</Row>
</Form>
<Row className="d-flex justify-content-around mt-3" >
<p className= "Passion">Passion</p>
<p className= "Passion">Expérience</p>
<p className= "Passion">Réseau</p>
<p className= "Passion">Formation</p>
</Row>
<Row className="d-flex justify-content-around">
<ReactStars value={this.props.Passion1} onChange={this.props.setPassion1} count={4} size={20} color2={'#ffd700'} />
<ReactStars value={this.props.Experience1} onChange={this.props.setExperience1} count={4} size={20} color2={'#ffd700'} />
<ReactStars value={this.props.Reseau1} onChange={this.props.setReseau1} count={4} size={20} color2={'#ffd700'} />
<ReactStars value={this.props.Formation1} onChange={this.props.setFormation1} count={4} size={20} color2={'#ffd700'} />
</Row>
</CardBody>
</Card>
{/* CARD NUMBER THREE */}
<Card className="InsideCard">
<CardBody>
<Form>
<Row className="d-flex justify-content-around">
<Col md={2}>
<FormGroup>
<Label for="examplePrenom">Mon Prénom</Label>
<Input type="Prenom" name="Prenom" id="examplePrenom" value={this.props.Firstname2} onChange={this.props.setFirstname2}/>
</FormGroup>
</Col>
<Col md={1}>
<FormGroup>
<Label for="examplePassword">Mon âge</Label>
<Input type="Age" name="Age" id="exampleAge" value={this.props.Age2} onChange={this.props.setAge2} />
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="exampleFonction">Ma fonction</Label>
<Input type="Fonction" name="Fonction" id="exampleFonction" value={this.props.Role2} onChange={this.props.setRole2} />
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label className="labelForm" for="StatutSocial">Mon statut</Label>
<Input type="select" name="StatutSocial" id="StatutSocial" value={this.props.Statut2} onChange={this.props.setStatut2}>
<option>Actionnaire</option>
<option>Gérant.e ou co Gérant.e</option>
<option>Salarié.e</option>
<option>Soutien</option>
</Input>
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="Finance">Mes attentes financière</Label>
<Input type="Finance" name="Attente Financiere" id="Finance" value={this.props.Money2} onChange={this.props.setMoney2}/>
</FormGroup>
</Col>
</Row>
</Form>
<Row className="d-flex justify-content-around mt-3" >
<p className= "Passion">Passion</p>
<p className= "Passion">Expérience</p>
<p className= "Passion">Réseau</p>
<p className= "Passion">Formation</p>
</Row>
<Row className="d-flex justify-content-around">
<ReactStars value={this.props.Passion2} onChange={this.props.setPassion2} count={4} size={20} color2={'#ffd700'} />
<ReactStars value={this.props.Experience2} onChange={this.props.setExperience2} count={4} size={20} color2={'#ffd700'} />
<ReactStars value={this.props.Reseau2} onChange={this.props.setReseau2} count={4} size={20} color2={'#ffd700'} />
<ReactStars value={this.props.Formation2} onChange={this.props.setFormation2} count={4} size={20} color2={'#ffd700'} />
</Row>
</CardBody>
</Card>
</Card>
<Row className="d-flex justify-content-around">
+
</Row>
</div>
);
}
}
const mapActionToProps = {
//CARD NUMBER ONE//
setFirstname : setFirstname,
setAge: setAge,
setRole: setRole,
setStatut: setStatut,
setMoney: setMoney,
setPassion: setPassion,
setExperience: setExperience,
setReseau: setReseau,
setFormation: setFormation,
//CARD NUMBER TWO//
setFirstname1 : setFirstname1,
setAge1: setAge1,
setRole1: setRole1,
setStatut1: setStatut1,
setMoney1: setMoney1,
setPassion1: setPassion1,
setExperience1: setExperience1,
setReseau1: setReseau1,
setFormation1: setFormation1,
//CARD NUMBER THREE//
setFirstname2 : setFirstname2,
setAge2: setAge2,
setRole2: setRole2,
setStatut2: setStatut2,
setMoney2: setMoney2,
setPassion2: setPassion2,
setExperience2: setExperience2,
setReseau2: setReseau2,
setFormation2: setFormation2,
}
const mapStateToProps = state => ({
//CARD NUMBER ONE//
team: state.team,
Firstname : state.team.Firstname,
Age : state.team.Age,
Role: state.team.Role,
Statut: state.team.Statut,
Money: state.team.Money,
Passion: state.team.Passion,
Experience: state.team.Experience,
Reseau: state.team.Reseau,
Formation: state.team.Formation,
//CARD NUMBER TWO//
Firstname1 : state.team.Firstname1,
Age1 : state.team.Age1,
Role1: state.team.Role1,
Statut1: state.team.Statut1,
Money1: state.team.Money1,
Passion1: state.team.Passion1,
Experience1: state.team.Experience1,
Reseau1: state.team.Reseau1,
Formation1: state.team.Formation1,
//CARD NUMBER THREE//
Firstname2 : state.team.Firstname2,
Age2 : state.team.Age2,
Role2: state.team.Role2,
Statut2: state.team.Statut2,
Money2: state.team.Money2,
Passion2: state.team.Passion2,
Experience2: state.team.Experience2,
Reseau2: state.team.Reseau2,
Formation2: state.team.Formation2
}
);
export default connect(mapStateToProps, mapActionToProps)(TeamEditor);
I do not know what to put in my constructor, neither on my button (link).

Answering all your questions. You don't need constructor unless you make some computations on parent class or on received props before class creation. Look carefuly at your code - you don't see yet difference between props received from global state and local state, but to make minimal changes I will only explain the difference - local component state is when there is no need to share it with other components, so storing this in state, than copy to store, than send it to props is not right. Rather use initial state in reducer and in connect method skip first argument connect(undefined, ....
Look also at mapDispatchToProps method - this should be function, not an object, unless newest redux allows it, it's function because you may need some computations before passing it to global state (store), same idea for mapStateToProps.
class TeamEditor extends Component {
/* no need for state (state is not the same as props) and without constructor
you can write state = {here your local state}; no need for 'this' keyword
*/
state = {
Team: [],
//...other initial parameters
};
//better use arrow function - no need to use .bind in constructor
render = () => {
return (<div className="mr-2">
{this.props.team.map(t => (<Card className="Editor-card">
<Row>
<Col md={4}>
<CardHeader className="card-header-warning card-header-icon">
<div className="card-icon card-icon-team">
<img src={process.env.PUBLIC_URL + '../assets/images/001-trade.svg'} width="40px" className="icon"
alt="icon"/>
</div>
<h3 className="float-left card-category mt-2"><span className="text-team">Notre équipe</span></h3>
</CardHeader>
</Col>
<Col md={8}>
<NavLink to="/" className="d-flex justify-content-end mt-0">
<Button className="mt-3">Enregistrer et quitter</Button>
</NavLink>
</Col>
</Row>
<Card>
<CardBody>
<Form>
<Row className="d-flex justify-content-around">
<Col md={2}>
<FormGroup>
<Label for="examplePrenom">Mon Prénom</Label>
<Input type="Prenom" name="Prenom" id="examplePrenom" value={t.Firstname}
onChange={this.props.setFirstname}/>
</FormGroup>
</Col>
<Col md={1}>
<FormGroup>
<Label for="examplePassword">Mon âge</Label>
<Input type="Age" name="Age" id="exampleAge" value={t.Age} onChange={this.props.setAge}/>
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="exampleFonction">Ma fonction</Label>
<Input type="Fonction" name="Fonction" id="exampleFonction" value={t.Role}
onChange={this.props.setRole}/>
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label className="labelForm" for="StatutSocial">Mon statut</Label>
<Input type="select" name="StatutSocial" id="StatutSocial" value={t.Statut}
onChange={t.setStatut}>
<option>Actionnaire</option>
<option>Gérant.e ou co Gérant.e</option>
<option>Salarié.e</option>
<option>Soutien</option>
</Input>
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="Finance">Mes attentes financière</Label>
<Input type="Finance" name="Attente Financiere" id="Finance" value={t.Money}
onChange={t.setMoney}/>
</FormGroup>
</Col>
</Row>
</Form>
<Row className="d-flex justify-content-around mt-3">
<p className="Passion">Passion</p>
<p className="Passion">Expérience</p>
<p className="Passion">Réseau</p>
<p className="Passion">Formation</p>
</Row>
<Row className="d-flex justify-content-around">
<ReactStars value={t.Passion} onChange={this.props.setPassion} count={4} size={20} color2={'#ffd700'}/>
<ReactStars value={t.Experience} onChange={this.props.setExperience} count={4} size={20} color2={'#ffd700'}/>
<ReactStars value={t.Reseau} onChange={this.props.setReseau} count={4} size={20} color2={'#ffd700'}/>
<ReactStars value={t.Formation} onChange={this.props.setFormation} count={4} size={20} color2={'#ffd700'}/>
</Row>
</CardBody>
</Card>
</Card>
)
)}
<Row className="d-flex justify-content-around">
<a href="ajout" className="round-button" onClick={
// no idea what method should be here but Team seems o be an object not method
}>+</a>
</Row>
</div>
);
};
}
const mapDispatchToProps = (dispatch) => ({
setFirstname: (/* parameters for this action */) => dispatch(setFirstname(/* parameters for this action */)),
setAge: (/* parameters for this action */) => dispatch(setAge(/* parameters for this action */)),
setRole: (/* parameters for this action */) => dispatch(setRole(/* parameters for this action */)),
setStatut: (/* parameters for this action */) => dispatch(setStatut(/* parameters for this action */)),
setMoney: (/* parameters for this action */) => dispatch(setMoney(/* parameters for this action */)),
setPassion: (/* parameters for this action */) => dispatch(setPassion(/* parameters for this action */)),
setExperience: (/* parameters for this action */) => dispatch(setExperience(/* parameters for this action */)),
setReseau: (/* parameters for this action */) => dispatch(setReseau(/* parameters for this action */)),
setFormation: (/* parameters for this action */) => dispatch(setFormation(/* parameters for this action */)),
});
const mapStateToProps = state => ({
Team: state.team,
Firstname: state.team.Firstname,
Age: state.team.Age,
Role: state.team.Role,
Statut: state.team.Statut,
Money: state.team.Money,
Passion: state.team.Passion,
Experience: state.team.Experience,
Reseau: state.team.Reseau,
Formation: state.team.Formation
});
export default connect(mapStateToProps, mapDispatchToProps)(TeamEditor);

Categories