I want to create a nested board in the facility. Something like this:
I wonder if it is possible to convert everything so that it creates an object from an array unless someone knows a better way or idea for it? JSON example:
{
"userId": "4",
"offers":[
{
"mallCodename": "gallery",
"shopCodename":"borubar",
"productCodename": "green_socks",
"discount": 30,
"ttl": 3600
},
{
"mallCodename": "gallery",
"shopCodename":"nike",
"productCodename": "sport_shoes",
"discount": 30,
"ttl": 222
}
]
}
This is my component:
export default function Form(props) {
const [values, setInputValue] = useState([]);
const dispatch = useDispatch();
function onChange(e) {
e.preventDefault();
const { name, value, type } = e.target;
setInputValue({ ...values, [name]: value});
}
function onSubmit(e) {
e.preventDefault();
dispatch(sendOffer([values]));
setInputValue([]);
}
return (
<div id="accordion" role="tablist">
<div className="card">
<div className="card-header" role="tab" id="headingOne">
<h5 className="mb-0">
<a
data-toggle="collapse"
href="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Rozwin
</a>
</h5>
</div>
<div
id="collapseOne"
className="collapse show"
role="tabpanel"
aria-labelledby="headingOne"
>
<form onSubmit={onSubmit}>
<table className="table table-responsive">
<tbody className="tbody-form-promo">
<tr className="tr-table-form-promo">
<td>Uzytkownik:</td>
<td>Nazwa produktu</td>
<td>Galleria</td>
<td>Nazwa sklepu</td>
<td>Znizka</td>
<td>Czas oferty</td>
</tr>
<tr className="tr-table-form-promo">
<td>{(values.userId = props.userId)}</td>
<td>
<input
className="text-place-post-form"
name="productCodename"
type="text"
placeholder="Nazwa produktu"
value={values.productCodename || ""}
onChange={onChange}
required
/>
</td>
<td>
<input
className="text-place-post-form"
name="mallCodename"
type="text"
placeholder="Galeria"
value={values.mallCodename || ""}
onChange={onChange}
required
/>
</td>
<td>
<input
className="text-place-post-form"
name="shopCodename"
type="text"
placeholder="Nazwa sklepu"
value={values.shopCodename || ""}
onChange={onChange}
required
/>
</td>
<td>
<input
className="text-place-post-form"
name="discount"
type="number"
placeholder="max 100%"
value={values.discount || ""}
onChange={onChange}
onInput={inputMaxLength}
maxLength="3"
max={100}
min={0}
step={1}
required
/>
</td>
<td>
<input
className="text-place-post-form"
type="number"
name="ttl"
placeholder="Max 180 minut"
value={values.ttl || ""}
max={180}
min={0}
step={1}
onChange={onChange}
maxLength="3"
onInput={inputMaxLength}
required
/>
</td>
</tr>
</tbody>
</table>
<div className="container">
<div className="row">
<div className="col-6 col-form-promo">
<Link to="/">
<button
className="btn btn-form-promo"
onClick={props.close}
>
Anuluj
</button>
</Link>
</div>
<div className="col-6 col-form-promo">
<button
className="btn btn-form-promo"
onSubmit={onSubmit}
>
Zapisz
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
);
}
I don't have Idee how to convert this. Or If somebody have better ideaa how can I do this. Please tell me :-).Nested array in object is very com
