I have this object:
JavaScript
x
19
19
1
const itemDataObject = {2
sort: '',3
title_item_lateral: '',4
text_item_lateral: '',5
image_lateral: [6
{7
title_image_lateral: '',8
path_image_lateral: '',9
},10
],11
document_lateral: '',12
links: [13
{14
title_link: '',15
link: '',16
},17
],18
};19
and i need to fill it in a form.
i use this function:
JavaScript
1
7
1
const handleChange = (i, e) => { 2
let itemData = [item_lateral];3
itemData[i][e.target.name]=e.target.value; 4
setItems(itemData); 5
setNewLateral({lateral, item_lateral, title_lateral});6
handleChangeChat(e); };7
and this inside the form:
JavaScript
1
98
98
1
<div>2
{item_lateral.map((input, i) => ( 3
<> 4
{ !(input.button_pressed === 'image' || input.button_pressed === 5
'links') && 6
<div className="row align-item_lateral-center" key= 7
{input.button_pressed + i + 1}> 8
<div className="col-2 mt-3">9
<h3>{input.button_pressed}</h3> 10
</div>11
<div className="col-10"> 12
<input13
placeholder={input.button_pressed}14
id={i}15
className='form-control mt-3' 16
name={input.button_pressed} 17
onChange= {e => handleChange(i, e)} 18
type="text" 19
/>20
</div>21
</div>22
} 23
{ input.button_pressed === 'image' && 24
<>25
<div className="row align-item_lateral-center row" key= 26
{input.button_pressed + i + 2}>27
<div className="col-2">28
<h3>Imagen: </h3>29
</div>30
<div className='col-10'>31
<input32
placeholder='title_image_lateral'33
id={i}34
className='form-control mt-3' 35
name='title_image_lateral' 36
onChange= {e => handleChange(i, e)} 37
type="text" 38
/> 39
</div>40
</div>41
<div className="row align-item_lateral-center row" key= 42
{input.button_pressed + i + 1}>43
<div className="col-2">44
<h3>Image Path: </h3>45
</div>46
<div className='col-10'>47
<input48
placeholder='path_image_lateral'49
id={i}50
className='form-control mt-3' 51
name='path_image_lateral' 52
onChange= {e => handleChange(i, e)} 53
type="text" 54
/> 55
</div>56
</div> 57
</>58
} 59
{input.button_pressed === 'links' &&60
<>61
<div className="row align-item_lateral-center row" key= 62
{input.button_pressed + i+2}>63
<div className="col-2">64
<h3>Title Link: </h3>65
</div>66
<div className="col-8">67
<input68
placeholder='titel_link' 69
id={i}70
className='form-control mt-3' 71
name='titel_link' 72
onChange= {e => handleChange(i, e)} 73
type="text" 74
/> 75
</div>76
</div>77
<div className="row align-item_lateral-center row" key={i}>78
<div className="col-2">79
<h3>Link: </h3>80
</div>81
<div className="col-8">82
<input83
placeholder='link'84
id={i}85
className='form-control mt-3' 86
name='link' 87
onChange= {e => handleChange(i, e)} 88
type="text" 89
/>90
</div>91
</div>92
</>93
} 94
</> 95
))}96
97
</div> 98
The form works onsubmit, and create values in the object with the property name, and the value.
But if the property (p.e: ‘title_image_lateral’), not put the new value in the correct place in the object, instead create a new element in the root of the object: title_image_lateral: (value submited in the form).
I thik that i can change the ‘root’ for the itemData[i][e.target.name]=e.target.value; , but i can not achieve.
Maybe i can create state for this values, and then onsubmit the form, set in the object…but maybe is made a big surround.
Some light for my issue.
Thanks.
Here the entire file:
JavaScript
1
353
353
1
import { useState } from "react";2
import { useDispatch, useSelector } from "react-redux";3
4
5
const LateralWindow = ({token}) => { 6
7
const itemDataObject = {8
sort: '',9
title_item_lateral: '',10
text_item_lateral: '',11
image_lateral: [12
{13
title_image_lateral: '',14
path_image_lateral: '',15
},16
],17
document_lateral: '',18
links: [19
{20
title_link: '',21
link: '',22
},23
],24
};25
26
const dispatch = useDispatch();27
const generalInfo = useSelector(state=> state.faqsGralInfo); 28
const {29
description,30
typeResponse,31
rolViews,32
workLoadLevel,33
id,34
id_intent,35
corpusArea,36
corpusName, 37
} = generalInfo;38
39
40
41
const [ finalResponse, setFinalResponse ] = useState({}); 42
const [ newJsonResponse, setNewJsonResponse ] = useState( {});43
const [ title_lateral, setTitleLateral ] = useState('');44
const [ item_lateral, setItems ] = useState([]);45
const [ lateral, setNewLateral] = useState({46
title_lateral: title_lateral,47
item_lateral: [item_lateral]48
});49
50
let buttonPressed;51
52
const [nameValue, setNameValue] = useState(['inicial']);53
console.log(nameValue);54
55
const addFields = (e) => {56
e.preventDefault();57
buttonPressed = e.target.value;58
setNameValue(buttonPressed); 59
let newItemField;60
newItemField = { itemDataObject, button_pressed: buttonPressed };61
setItems([item_lateral, newItemField]); 62
};63
64
65
const handleChangeChat = (e) => { 66
setFinalResponse({finalResponse, [e.target.name]: e.target.value}); 67
setNewJsonResponse({68
newJsonResponse,69
accesToken: token, 70
newDataResponse: {71
description, 72
typeResponse,73
rolViews, 74
workLoadLevel, 75
id, 76
id_intent, 77
response_json_new:{finalResponse, lateral}, 78
corpusArea, 79
corpusName,80
lateral_W: generalInfo.lateral_W === 'true' ? 1 : 0 , 81
}82
},83
);84
};85
86
const handleChange = (i, e) => { 87
let itemData = [item_lateral];88
itemData[i][e.target.name]=e.target.value; 89
setItems(itemData); 90
setNewLateral({lateral, item_lateral, title_lateral});91
handleChangeChat(e); };92
93
const submitForm = (e) => {94
e.preventDefault(); 95
};96
const sendToCorpus = () => { 97
/* setTimeout(() => {98
window.location = '/corpus';99
}, 3000); */100
};101
102
return (103
<>104
<div className="card mb-3">105
<div className="card-body">106
<h2> Diseño Chat </h2>107
<form className="row mt-4" onSubmit={submitForm} >108
<div className="col-md-1 mb-4">109
<label htmlFor="inputDescription" className="form-label text-center">110
<h5> Título </h5>111
</label> 112
</div>113
<div className="col-md-11">114
<input115
type="text"116
className="form-control"117
name='title'118
onChange={handleChangeChat}119
id="inputDescription"120
required121
/>122
</div> 123
124
<div className="col-md-1 mb-4">125
<label htmlFor="inputResponse" className="form-label text-center" >126
<h5> Texto </h5>127
</label> 128
</div>129
<div className="col-md-11">130
<input131
type="textarea"132
className="form-control"133
name='text'134
onChange={handleChangeChat}135
id="inputResponse"136
required137
/>138
</div> 139
<div className="col-md-1 mb-4">140
<label htmlFor="link" className="form-label text-center" >141
<h5> Link </h5>142
</label>143
</div> 144
<div className="col-md-5">145
<input146
type="link"147
className="form-control"148
name="link"149
onChange={handleChangeChat}150
id="link"151
required152
/>153
</div>154
<div className="col-md-1">155
<label htmlFor="link_title" className="form-label text-center" >156
<h5> Title Link </h5>157
</label>158
</div>159
<div className="col-md-5">160
<input161
type="text"162
className="form-control"163
name='link_title'164
onChange={handleChangeChat}165
id="link_title"166
required167
/>168
</div>169
<div className="col-md-1 mb-4">170
<label htmlFor="image" className="form-label text-center" >171
<h5> Image </h5>172
</label>173
</div> 174
<div className="col-md-5">175
<input176
type="file"177
className="form-control"178
name="image"179
onChange={handleChangeChat}180
id="image"181
required182
/>183
</div>184
<div className="col-md-1">185
<label htmlFor="image_title" className="form-label text-center" >186
<h5> Title Image </h5>187
</label>188
</div>189
<div className="col-md-5">190
<input191
type="text"192
className="form-control"193
name='image_title'194
onChange={handleChangeChat}195
id="image_title"196
required197
/>198
</div>199
<div className="mt-5" >200
<h3>DISEÑO VENTANA LATERAL</h3>201
</div> 202
<h5 className="ms-5 mb-5 mt-5"> Diseña tu respuesta añadidendo subtitulos, texto, imagenes, documentos y enlaces. 203
Puedes seleccionarlos con el orden que mejor se ajuste a tu respuesta. Y puedes poner tantos elementos como quieras. </h5>204
<div className="container">205
<div className="row align-item_lateral-center" >206
<div className="col-2 mt-3">207
<h3>Título Ventana Lateral</h3> 208
</div>209
<div className="col-10"> 210
<input211
placeholder= 'Título Ventana Lateral'212
className='form-control mt-3'213
value={title_lateral} 214
onChange= {e=> setTitleLateral(e.target.value)} 215
type="text" 216
/>217
</div>218
</div>219
220
<div>221
{item_lateral.map((input, i) => ( 222
<> 223
{ !(input.button_pressed === 'image' || input.button_pressed === 'links') && 224
<div className="row align-item_lateral-center" key={input.button_pressed + i + 1}> 225
<div className="col-2 mt-3">226
<h3>{input.button_pressed}</h3> 227
</div>228
<div className="col-10"> 229
<input230
placeholder={input.button_pressed}231
id={i}232
className='form-control mt-3' 233
name={input.button_pressed} 234
onChange= {e => handleChange(i, e)} 235
type="text" 236
/>237
</div>238
</div>239
} 240
{ input.button_pressed === 'image' && 241
<>242
<div className="row align-item_lateral-center row" key={input.button_pressed + i + 2}>243
<div className="col-2">244
<h3>Imagen: </h3>245
</div>246
<div className='col-10'>247
<input248
placeholder='title_image_lateral'249
id={i}250
className='form-control mt-3' 251
name='title_image_lateral' 252
onChange= {e => handleChange(i, e)} 253
type="text" 254
/> 255
</div>256
</div>257
<div className="row align-item_lateral-center row" key={input.button_pressed + i + 1}>258
<div className="col-2">259
<h3>Image Path: </h3>260
</div>261
<div className='col-10'>262
<input263
placeholder='path_image_lateral'264
id={i}265
className='form-control mt-3' 266
name='path_image_lateral' 267
onChange= {e => handleChange(i, e)} 268
type="text" 269
/> 270
</div>271
</div> 272
</>273
} 274
{input.button_pressed === 'links' &&275
<>276
<div className="row align-item_lateral-center row" key={input.button_pressed + i+2}>277
<div className="col-2">278
<h3>Title Link: </h3>279
</div>280
<div className="col-8">281
<input282
placeholder='titel_link' 283
id={i}284
className='form-control mt-3' 285
name='titel_link' 286
onChange= {e => handleChange(i, e)} 287
type="text" 288
/> 289
</div>290
</div>291
<div className="row align-item_lateral-center row" key={i}>292
<div className="col-2">293
<h3>Link: </h3>294
</div>295
<div className="col-8">296
<input297
placeholder='link'298
id={i}299
className='form-control mt-3' 300
name='link' 301
onChange= {e => handleChange(i, e)} 302
type="text" 303
/>304
</div>305
</div>306
</>307
} 308
</> 309
))}310
311
</div> 312
<div className="mt-5 text-center"> 313
<button className="btn btn-primary me-4 mb-4" value="text_item_lateral" onClick={addFields}>314
Add Text315
</button>316
<button className="btn btn-primary me-4 mb-4" value="title_item_lateral" onClick={addFields}>317
Add Subtitle318
</button> 319
<button className="btn btn-primary me-4 mb-4" value="image" onClick={addFields}>320
Add Image321
</button>322
<button className="btn btn-primary me-4 mb-4" value="document_lateral" onClick={addFields}>323
Add document324
</button>325
<button className="btn btn-primary me-4 mb-4" value="links" onClick={addFields}>326
Add Links327
</button> 328
</div>329
</div>330
<div>331
</div>332
<div>333
{(isCreated && isVariationsSave) && 334
<div className="alert alert-success" role='alert'>335
Respuesta CREADA Correctamente336
</div>337
}338
{isCreated && sendToCorpus()}339
</div>340
<button className="btn btn-warning me-5 mb-3" type="submit" >Preview</button>341
<button className="btn btn-success me-5 mb-3" type="submit">Guardar Respuesta</button>342
</form>343
<div className="text-center">344
</div> 345
</div>346
</div> 347
348
</>349
);350
};351
352
export default LateralWindow;353
Advertisement
Answer
Check if this suits your needs:
JavaScript
1
308
308
1
import { useState } from "react";2
import { useSelector } from "react-redux";3
4
const LateralWindow = ({ token }) => {5
const itemDataObject = {6
sort: "",7
title_item_lateral: "",8
text_item_lateral: "",9
image_lateral: {10
title_image_lateral: "",11
path_image_lateral: "",12
},13
document_lateral: "",14
links: {15
title_link: "",16
link: "",17
},18
};19
20
const generalInfo = useSelector((state) => state.faqsGralInfo);21
const { description, typeResponse, rolViews, workLoadLevel, id, id_intent, corpusArea, corpusName } = generalInfo;22
23
const [finalResponse, setFinalResponse] = useState({});24
const [newJsonResponse, setNewJsonResponse] = useState({});25
const [title_lateral, setTitleLateral] = useState("");26
const [item_lateral, setItems] = useState([]);27
const [lateral, setNewLateral] = useState({28
title_lateral: title_lateral,29
item_lateral: [item_lateral],30
});31
32
let buttonPressed;33
34
const addFields = (e) => {35
e.preventDefault();36
buttonPressed = e.target.value;37
let newItemField;38
newItemField = { itemDataObject, button_pressed: buttonPressed };39
setItems([item_lateral, newItemField]);40
};41
42
const handleChangeChat = (e) => {43
setFinalResponse({ finalResponse, [e.target.name]: e.target.value });44
setNewJsonResponse({45
newJsonResponse,46
accesToken: token,47
newDataResponse: {48
description,49
typeResponse,50
rolViews,51
workLoadLevel,52
id,53
id_intent,54
response_json_new: { finalResponse, lateral },55
corpusArea,56
corpusName,57
lateral_W: generalInfo.lateral_W === "true" ? 1 : 0,58
},59
});60
};61
62
const handleChange = (i, e) => {63
let itemData = [item_lateral];64
let elementChanged = e.target;65
let name = elementChanged.name;66
let value = elementChanged.value;67
68
if (name === "title_image_lateral" || name === "path_image_lateral") {69
itemData[i].image_lateral[name] = value;70
} else if (name === "title_link" || name === "link") {71
itemData[i].links[name] = value;72
} else {73
itemData[i][name] = value;74
}75
76
setItems(itemData);77
setNewLateral({ lateral, item_lateral, title_lateral });78
handleChangeChat(e);79
};80
81
const submitForm = (e) => {82
console.log(item_lateral);83
e.preventDefault();84
};85
86
return (87
<>88
<div className="card mb-3">89
<div className="card-body">90
<h2> Diseño Chat </h2>91
<form className="row mt-4" onSubmit={submitForm}>92
<div className="col-md-1 mb-4">93
<label htmlFor="inputDescription" className="form-label text-center">94
<h5> Título </h5>95
</label>96
</div>97
<div className="col-md-11">98
<input type="text" className="form-control" name="title" value="Titulo" onChange={handleChangeChat} id="inputDescription" required />99
</div>100
101
<div className="col-md-1 mb-4">102
<label htmlFor="inputResponse" className="form-label text-center">103
<h5> Texto </h5>104
</label>105
</div>106
<div className="col-md-11">107
<input type="textarea" className="form-control" name="text" value="Texto" onChange={handleChangeChat} id="inputResponse" required />108
</div>109
<div className="col-md-1 mb-4">110
<label htmlFor="link" className="form-label text-center">111
<h5> Link </h5>112
</label>113
</div>114
<div className="col-md-5">115
<input type="link" className="form-control" name="link" value="link" onChange={handleChangeChat} id="link" required />116
</div>117
<div className="col-md-1">118
<label htmlFor="link_title" className="form-label text-center">119
<h5> Title Link </h5>120
</label>121
</div>122
<div className="col-md-5">123
<input type="text" className="form-control" name="link_title" value="testeLink" onChange={handleChangeChat} id="link_title" required />124
</div>125
<div className="col-md-1 mb-4">126
<label htmlFor="image" className="form-label text-center">127
<h5> Image </h5>128
</label>129
</div>130
<div className="col-md-5">131
<input type="file" className="form-control" name="image" onChange={handleChangeChat} id="image" required />132
</div>133
<div className="col-md-1">134
<label htmlFor="image_title" className="form-label text-center">135
<h5> Title Image </h5>136
</label>137
</div>138
<div className="col-md-5">139
<input140
type="text"141
className="form-control"142
name="image_title"143
value="title image"144
onChange={handleChangeChat}145
id="image_title"146
required147
/>148
</div>149
<div className="mt-5">150
<h3>DISEÑO VENTANA LATERAL</h3>151
</div>152
<h5 className="ms-5 mb-5 mt-5">153
Diseña tu respuesta añadidendo subtitulos, texto, imagenes, documentos y enlaces. Puedes seleccionarlos con el orden que mejor se ajuste154
a tu respuesta. Y puedes poner tantos elementos como quieras.{" "}155
</h5>156
<div className="container">157
<div className="row align-item_lateral-center">158
<div className="col-2 mt-3">159
<h3>Título Ventana Lateral</h3>160
</div>161
<div className="col-10">162
<input163
placeholder="Título Ventana Lateral"164
className="form-control mt-3"165
value={title_lateral}166
onChange={(e) => setTitleLateral(e.target.value)}167
type="text"168
/>169
</div>170
</div>171
172
<div className="mt-5 text-center">173
<button className="btn btn-primary me-4 mb-4" value="text_item_lateral" onClick={addFields}>174
Add Text175
</button>176
<button className="btn btn-primary me-4 mb-4" value="title_item_lateral" onClick={addFields}>177
Add Subtitle178
</button>179
<button className="btn btn-primary me-4 mb-4" value="image" onClick={addFields}>180
Add Image181
</button>182
<button className="btn btn-primary me-4 mb-4" value="document_lateral" onClick={addFields}>183
Add document184
</button>185
<button className="btn btn-primary me-4 mb-4" value="links" onClick={addFields}>186
Add Links187
</button>188
</div>189
190
<div>191
{item_lateral.map((input, i) => {192
return (193
<div key={input.button_pressed + i}>194
{!(input.button_pressed === "image" || input.button_pressed === "links") && (195
<div className="row align-item_lateral-center">196
<div className="col-2 mt-3">197
<h3>{input.button_pressed}</h3>198
</div>199
<div className="col-10">200
<input201
placeholder={input.button_pressed}202
id={i}203
className="form-control mt-3"204
name={input.button_pressed}205
onChange={(e) => handleChange(i, e)}206
type="text"207
/>208
</div>209
</div>210
)}211
{input.button_pressed === "image" && (212
<>213
<div className="row align-item_lateral-center row">214
<div className="col-2">215
<h3>Imagen: </h3>216
</div>217
<div className="col-10">218
<input219
placeholder="title_image_lateral"220
id={i}221
className="form-control mt-3"222
name="title_image_lateral"223
onChange={(e) => handleChange(i, e)}224
type="text"225
/>226
</div>227
</div>228
<div className="row align-item_lateral-center row">229
<div className="col-2">230
<h3>Image Path: </h3>231
</div>232
<div className="col-10">233
<input234
placeholder="path_image_lateral"235
id={i}236
className="form-control mt-3"237
name="path_image_lateral"238
onChange={(e) => handleChange(i, e)}239
type="text"240
/>241
</div>242
</div>243
</>244
)}245
{input.button_pressed === "links" && (246
<>247
<div className="row align-item_lateral-center row">248
<div className="col-2">249
<h3>Title Link: </h3>250
</div>251
<div className="col-8">252
<input253
placeholder="title_link"254
id={i}255
className="form-control mt-3"256
name="title_link"257
onChange={(e) => handleChange(i, e)}258
type="text"259
/>260
</div>261
</div>262
<div className="row align-item_lateral-center row">263
<div className="col-2">264
<h3>Link: </h3>265
</div>266
<div className="col-8">267
<input268
placeholder="link"269
id={i}270
className="form-control mt-3"271
name="link"272
onChange={(e) => handleChange(i, e)}273
type="text"274
/>275
</div>276
</div>277
</>278
)}279
</div>280
);281
})}282
</div>283
</div>284
<div></div>285
<div>286
{isCreated && isVariationsSave && (287
<div className="alert alert-success" role="alert">288
Respuesta CREADA Correctamente289
</div>290
)}291
{isCreated && sendToCorpus()}292
</div>293
<button className="btn btn-warning me-5 mb-3" type="submit">294
Preview295
</button>296
<button className="btn btn-success me-5 mb-3" type="submit">297
Guardar Respuesta298
</button>299
</form>300
<div className="text-center"></div>301
</div>302
</div>303
</>304
);305
};306
307
export default LateralWindow;308