Please tell me (or give a tip to the guide in which this is described) how to organize the creation of an element on the page when the user performs some action. For example, I have on the selectfield page, next to it there is a button +. When you click on this button, the same selectfield should appear just below. I thought to write and hang on the onClick button a method that, when pressed, would call the selectfield-a render method, but it seems to me wrong, because He simply re-draws the existing field. How to properly organize this interaction?

  • one
    When you click on + you add an item to some of your storage, and this storage is list.map((row) => <MyElement data={row} />) - Vasily Barbashev
  • and then I forward the map in the render? and the keys of the selects lying in the map will become the id of these selects when rendering? - Iga
  • one
    You can not forward and directly write in the render block the code that I wrote. (in curly brackets of course) - Vasily Barbashev

1 answer 1

I will give an example from my code:

 const {sources, actions, rows} = this.props; const SourceList = rows.map( (row, key) => { const type = row.get('type'); const props = { key, index: key }; if (type === RowTypes.GROUP) { return <Group {...props}/>; } else if (type === RowTypes.VIRTUAL) { return <Virtual {...props} /> } return <RowItem {...props} /> } );

My fields are built according to different types, and in SourceList there will eventually be a constructed model. In the render you just need to write:

 <div>{SourceList}</div>
  • i need not quite that. I have a selectfield class, it has a render and a request for an Ajax, according to which the list comes (from which the user chooses). there is also a class with a form in which the form is rendered, and in the form I just throw in <UserSelectfield /> (this select has some kind of ref and source). there is also a button that should generate more selectfields when pressed. that is, I render in the selection itself and then there is also a form rander. - Iga
  • one
    what difference, the data came, you wrote them down (I don’t know where, maybe to the state of the component) they renounced it, and immediately updated everything. You have the DOM built according to the data, the data will be, the interface will be updated - Vasily Barbashev
  • Yes, the data has come, the state of the selectfield has changed. I don’t quite understand what to put in the map and where to do it. In the handler button? - Iga
  • one
    There should be an event on the button that will add an element to the array of your fields (empty or which you need). Well, it will be immediately drawn - Vasily Barbashev
  • one
    I do not know your architecture, I generally process everything in the reducer, the components do not know the logic, they only draw the data. Or you can declare an array in the component constructor in this.state = {myArray: []} . And by clicking on the button, do this.setState() in addition to the element in myArray . But the logic in the components is evil, it is better to endure everything, and it is easier to work purely with data in the reducer - Vasily Barbashev