React - Editing an array of input fields

JavaScript
1

Hello guys!

Here is the thing.

I have a note element, which has a list inside it. The object looks like this.

const example = {
  type: "text",
  title: "new list",
  list: [{ text: "bananas" }, { text: "apples" }]
};

i can create this note element with some this.refs tricks, even if its a bit hacky, it works.

but editing this element has been unsuccesfull so far.

i dont know how to create refs how a unknown number of inputs fields (for the objects nested inside the exampleNote and the array with the key “list”), i have given up on controlled fields as i have to fill in the information for the input fields anyway so any uncontrolled input solutions are welcome.

bit stuck at the moment.

2

Is this what you’re trying to achieve: https://codesandbox.io/s/o54n9zwnly

1 Like
3

close, but considering that this is a object created beforehand, i need to somehow pass the whole object as a prop(or somehow reference it), or use getDerivedStateFromProps to set the state of the component that i am going to edit this object in. when i use getDerivedStateFromProps, if fires everytime that i setState and whatever change i make is overriten with the props that i pass in.

and when i fill the uncontrolled inputs fields of this component with the array items (without getDerivedStateFromProps) i cannot type, the input field is sort of stuck even thou the onChange fires up.

i hope this makes sense :confused:

4

Use codesandbox.io and show me the code you got so far.

There are rarely use cases for getDerivedStateFromProps and yours doesn’t seem like one. Normally you should use componentDidUpdate to handle props update.

6

if that feels like super complicated, this is what im trying to do.

const example = {
  type: "text",
  title: "new list",
  list: [{ text: "bananas" }, { text: "apples" }]
};


<EditList list={example}/>

so a state for the example object is not setup in the state of the EditList component its passed to.

it must be set as the state of the EditList component and edited in that EditList component.

and its been passed on as a prop from a database so what i get back form EditList component must be the final edited version of the example object. i cannot keep sending requests to the server on the parent component of EditList everytime “onChange” happens on EditList.

7

These 2 comments are confusing. What is it that you want to do with the data in the <EditList> component? Is it a class based component or a stateless component?

8

That sandbox really makes no sense. As far as I understand my example solves your problem.

9

It’s a class based component, which renders the list that gets passed in as a prop.

And all the other fields of the list, I manage to edit (the title and the text) using createRef(). But I cannot createRef’s for the array items (bananas and apples) because the amount of items in the array varies and I cannot have hardcoded refs for that, those input fields are being mapped through.

10

Ok lets track back a little.

I have no problems during the “creation” of this example object, like the example you gave.

Having everything setup like that is clear to me.

My problem is, when I have to “read” an object like this from the database, a json, an api, whatever you want to call it, I cannot edit it. “onChange” does not work, the text is there, but I cannot type. And when I try using defaultValue and createRef(), I have a gigantic problem, cuz the number of items inside the “list” array is unknown.

So I don’t have the data inside my EditList Component’s state:

const example = {
  type: "text",
  title: "new list",
  list: [{ text: "bananas" }, { text: "apples" }]
};

<EditList list={example}/>

class EditList extends Component{
  this.state = {
    type: "",
    title: "",
    list: []
  };
}

I need to put whatever comes for the database, inside my EditList state, then edit the values using DOM, and return back the edited object.

I hope this explains it a bit better.

11

Ok, I took my previous example and split out some logic into separate <EditList/> component (but in general nothing really changed): https://codesandbox.io/s/llnym06y1l

1 Like
12

I know it is a minor change but now its easier for me to imagine/understand.

Sadly I’m not familiar with Hooks so I’ll refactor my code and test it.

Thank you!

13

So wait a second, all you wanna do is to keep track of each input field change?

If I understand you correctly, the <EditList> component just renders the list of inputs correct?