Agfdhyk

I am receiving a very unusual error with my Object. I am trying to get the value of the key name from an object which looks like this

{id: 3,



image_url: "anticon anticon-gift",



is_deleted: false,



name: "Inform Partners",



org_id: null",}

The thing is I have an object coming from a state in a variable let us say this.state.description_data it looks like this

As you can see I am getting a category_id in it. I want to match that category_id from another state object which is

Now, I want to match the category_id iIgot from description_data with the id in category_data and get the value of name from it and show it in the render. I get the value but after a few refreshing or by going out of the page and coming back in it shows me error as follows

I have tried this code to get the value

var defaultCategoryId= this.state.description_data.map(c=>{

            return c.category_id

        });

        console.log("description_data")

        console.log(this.state.description_data)

        console.log(defaultCategoryId[0])

        console.log(this.state.category_data)



        let catId= defaultCategoryId[0] -1;

        let defaultCategoryValue = this.state.category_data[catId];



        // let catValue=defaultCategoryValue.map(c=>{

        //     return c.name

        // });

        console.log(defaultCategoryValue);

The object i mentioned above is being generated in the variable let defaultCategoryValue

I am using the defaultCategoryValue.name in render method which looks like this:

return (

    <Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large">



       {this.state.cover_show===false?<div>

            {this.state.description_data.map(d=>

            <div key={d.id}>

             <Row key={d.id} style={rowStyle} gutter={gutter} justify="start" style={{marginBottom: "10px"}}>

                                <Col md={16} sm={12} xs={24} >

                                    <div className="form-element">

                                        <label className="label-class" title="">Production Name <Tooltip title="This is a name used that you can use to uniquely identify your production, making it easier for you and your contributors to find it. We recommend the name be a few words that describe the nature of the project."><Icon className="tooltip-icon" type="question-circle-o" /></Tooltip> </label>

                                        <Input className="txt-font"  name="display_app_name" id={"display_app_name-" + d.id} maxLength={70}  defaultValue={d.display_app_name} onChange={this.ontxtChange} />

                                        <span className="error-text">{this.validator.message('display_app_name', d.display_app_name, 'required|max:70', false, { default: 'This field is required.',max:'You have exceeded the maximum character limit.' })}</span>

                                        <p style={{float:"right"}}>{d.display_app_name.length}/70</p>

                                    </div>

                                    <div className="form-element">

                                        <label className="label-class" title="">Category <Tooltip title="This is where you can specify which of the options most closely aligns with the purpose of the video. If you are using a pre-built storyboard, this will have already been selected for you."><Icon className="tooltip-icon" type="question-circle-o" /></Tooltip> </label>

                                        <Select defaultValue={defaultCategoryValue.name} onChange={this.onCategoryChange} id={"category_id-" + d.id}>

                                            {categoryOptions}

                                        </Select>

                                        <span className="error-text">{this.validator.message('category_id', d.category_id, 'required', false, { default: 'This field is required.'})}</span>

                                    </div>

Probably the way i am getting the value is wrong. I am assuming this because if i dont type defaultCategoryValue.name and write d.category_id i dont get any error. The defaultCategoryValue always revieves the data no matter how many times i refresh. But it shows error sometimes if you use it in <Select defaultValue={defaultCategoryValue.name> as you can see above in the code.

Please help me with this guys. Thank you.

Given the shape for this.state.description_data to be

[

   {

    //...

    category_id

    //...

   }

]

and this.state.category_data to be

[

   {

    //...

    id

    //...

   }

]

It seems about right to convert this.state.category_data from an array to an object having its keys to be the category_id. This will make it easier to lookup the category data for a category_id when mapping this.state.description_data

const CATEGORY_DATA = this.state.category_data.reduce(

                        (categories, category) => (

                          {...categories, [category.id]: category}

                        ), 

                        {}

                      )

Now, this.state.description_data can be mapped to its category data in the following way.

this.state.description_data.map(

  (description) => (

    <div key={description.id}>

      //...

      <Select 

        defaultValue={CATEGORY_DATA[description.category_id]}

        id={"category_id-" + description.id}

        onChange={this.onCategoryChange}

      >

        {categoryOptions}

      </Select>

      //...

    </div> 

  )

)