React Accessing a value from an array

Question

I have a form in React which dynamically adds new input elements. This seems to be working ok but I cant seem to access the input values as shown in this screenshot...

I have tried the following

console.log(this.state.telephone.name)

and...

console.log(this.state.telephone.tidx.name)

where tidx is the unique key.

Here is the constructor...

 constructor() {
        super();
        this.state = {
            role: "Installer",
            name: "",
            telephoneType: [{ name: "" }],
            telephone: [{ name: "" }],
            tidx: "",
            emailType: [{ email: "" }],
            email: [{ email: "" }],
            eidx: "",
            notes: ""
        };
    }

and this is my function to handle the input forms...

handleTelephoneChange = tidx => evt => {

        const newTelephone = this.state.telephone.map((telephone, tsidx) => {

            if (tidx !== tsidx) return telephone;
            return { ...telephone, name: evt.target.value };
        });
        this.setState({ telephone: newTelephone }, () => {
            // get state on callback
            console.log(this.state)
            console.log(this.state.telephone.name)
            console.log(this.state.telephone.tidx.name)
        }
        );
    };

and rendered like this...

{this.state.telephone.map((telephone, tidx) => (
<MDBRow key={tidx} className="grey-text flex-nowrap align-items-center no-gutters my-2">
<MDBCol md="12">
<input value={telephone.name} onChange={this.handleTelephoneChange(tidx)}placeholder={`Telephone No. #${tidx + 1}`} className="form-control"/>
</MDBCol>
    </MDBRow>
     ))}

Any advice greatly appreciated as I am fairly new to forms in React. Thanks.

Cat_Enthusiast · Accepted Answer · 2019-06-28 11:10:29Z

2

telephone is an array, so you should be using index notation.

  console.log(this.state.telephone[tidx].name)

To render a corresponding phone-type for each telephone:

{this.state.telephone.map((telephone, tidx) => (
     <MDBRow key={tidx} className="grey-text flex-nowrap align-items-center no-gutters my-2">
        <MDBCol md="12">
            <input value={this.state.telephoneType[tidx].yourValue} onChange={this.defineYourTelephoneTypeEventHandler(tidx)}/>
            <input value={telephone.name} onChange={this.handleTelephoneChange(tidx)}placeholder={`Telephone No. #${tidx + 1}`} className="form-control"/>
        </MDBCol>
      </MDBRow>
 ))}

edited Jun 28, 2019 at 11:10

answered Jun 28, 2019 at 10:25

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Steven Collins Over a year ago

Thats great thanks the index notation worked. I cant type anything in the input field if I use your event-handler suggestion..

Cat_Enthusiast Over a year ago

@StevenCollins nice glad that first part worked for you. That's interesting, and you're not experiencing any issues with the UI with your initial code?

Steven Collins Over a year ago

thats correct, it all worked ok previously. here is a quick video with my original event-handler screencast.com/t/pQOPVLff

Steven Collins Over a year ago

I hope you dont mind another quick question related to my post which has been bugging me. I have another imput field called TelephoneType. Is it possible to do something like this or would they need to be seperate? {this.state.telephone.map((telephone, tidx, telephoneType, ttidx) => ()}

Cat_Enthusiast Over a year ago

@StevenCollins you can not do that within your existing this.state.telephone.map(), that function strictly follows this argument structure. array.map((item, index, ownArray)) so you would not be able to a directly target your other array like that. However, if we assume that the order of the items in telephone arr correspond to the same order of items in telephoneType, you could just use the index of provided the first array to reach into the value of 2nd array. Similarly you would use index notation :)... Otherwise, you can just use a second .map() as well

|

Collectives™ on Stack Overflow

React Accessing a value from an array

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related