Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Dynamically Set State is Not Displayed in Generated Places in Javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 440
    Answer it

    I am receiving some data as props and on click I am trying to display next items from array. In render I'm calling `{this.dropdown()}` which triggers folowing and display data succedsfully:

     

        dropdown = () => {
          var dropdown = undefined
          if(this.props.catList){
            const cat = this.props.catList
            const list = JSON.stringify(this.props.catList)
            if(list.length > 0){
              dropdown = <div><p onClick={() =>{this.subCat()}}>{cat.title}</p>{this.state.firstSubCat}</div>
            }
          }
          return dropdown
        }

     

    Next, when I click on item, sub categories is displayed with no issues and generates place where to display state for next function `{this.state['sub'+cat.id]}` :

     

        subCat = () => {
          let subCat = []
          this.props.catList.children.map(cat => {
            subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
          })
          this.setState({firstSubCat: subCat})
        }

     

    Next two function is for loop through rest of array to display next items on click. (Please note that I did not use it from beginning because first line of data is not objects but contains 'children' as array so now i can use these two functions):

     

        find = (array, id) => {
          // Loop the entries at this level
          for (const entry of array) {
              // If we found it, return it
              if (entry.id === id) {
                  return entry;
              }
              // If not but there's a type array, recursively search it
              if (Array.isArray(entry.type)) {
                  const found = find(entry.type, id);
                  if (found) {
                      // Recursive search found it, return it
                      return found;
                  }
              }
          }
          return undefined
        }

        searchSubCat = (id) => {
          let subCat = []
          const children = this.find(this.props.catList.children, id)
          children.children.map(cat => {
            subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
          })
          this.setState({['sub' + id]: subCat})
        }

     

    So far there is no errors popping up but in generated place state is not being displayed. When generating place ( with this: `{this.state['sub'+cat.id]}` ) where to display state I pass its id to next step to set state with same id so state should be displayed there but nothing.

     


    **Full code for component:**

     

        import React, {Component} from 'react';


        class SearchResult extends Component {

          constructor( props ){
            super( props );
            this.state = {

            }
          }

          find = (array, id) => {
            // Loop the entries at this level
            for (const entry of array) {
                // If we found it, return it
                if (entry.id === id) {
                    return entry;
                }
                // If not but there's a type array, recursively search it
                if (Array.isArray(entry.type)) {
                    const found = find(entry.type, id);
                    if (found) {
                        // Recursive search found it, return it
                        return found;
                    }
                }
            }
            return undefined
          }

          searchSubCat = (id) => {
            let subCat = []
            const subId = 'sub' + id
            console.log(subId)
            const children = this.find(this.props.catList.children, id)
            children.children.map(cat => {
              subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
            })
            this.setState({['sub' + id]: subCat})
          }

          subCat = () => {
            let subCat = []
            this.props.catList.children.map(cat => {
              subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
              console.log('sub--'+cat.id)
            })
            this.setState({firstSubCat: subCat})
          }
          dropdown = () => {
            var dropdown = undefined
            if(this.props.catList){
              const cat = this.props.catList
              const list = JSON.stringify(this.props.catList)
              if(list.length > 0){
                dropdown = <div><p onClick={() =>{this.subCat()}}>{cat.title}</p>{this.state.firstSubCat}</div>
              }
            }
            return dropdown
          }

          render() {
            return (
              <div>
                {this.dropdown()}
              </div>

            )
          }
        }


        export default SearchResult;

     

    I receive array from server with Redux which I send to my first component where I use map() method to find 1st level of array and send it to component with its childrens as props(catList). Cant really copy and paste catList prop value here so here is full array from server, how i pass it and would add IMG of console logging it but seems that I need at least 10 reputation to do that.

     

    Array:

     

        [{"id":1,"title":"Electronics","path":"Electronics","children":[{"id":2,"title":"Accessories","children":[{"id":6,"title":"Portable Power Banks","children":[]},{"id":7,"title":"Charging Cables","children":[]},{"id":9,"title":"Batteries","children":[{"id":10,"title":"Disposable","children":[]},{"id":19,"title":"Rechargable","children":[]}]}]},{"id":3,"title":"Computers","children":[{"id":4,"title":"Components","children":[{"id":5,"title":"Laptops","children":[]}]}]}]},{"id":2,"title":"Accessories","path":"Electronics->Accessories","children":[{"id":6,"title":"Portable Power Banks","children":[]},{"id":7,"title":"Charging Cables","children":[]},{"id":9,"title":"Batteries","children":[{"id":10,"title":"Disposable","children":[]},{"id":19,"title":"Rechargable","children":[]}]}]},{"id":6,"title":"Portable Power Banks","path":"Electronics->Accessories->Portable Power Banks","children":null},{"id":7,"title":"Charging Cables","path":"Electronics->Accessories->Charging Cables","children":null},{"id":9,"title":"Batteries","path":"Electronics->Accessories->Batteries","children":[{"id":10,"title":"Disposable","children":[]},{"id":19,"title":"Rechargable","children":[]}]},{"id":10,"title":"Disposable","path":"Electronics->Accessories->Batteries->Disposable","children":null},{"id":19,"title":"Rechargable","path":"Electronics->Accessories->Batteries->Rechargable","children":null},{"id":3,"title":"Computers","path":"Electronics->Accessories->Computers","children":[{"id":4,"title":"Components","children":[{"id":5,"title":"Laptops","children":[]}]}]},{"id":4,"title":"Components","path":"Electronics->Accessories->Computers->Components","children":[{"id":5,"title":"Laptops","children":[]}]},{"id":5,"title":"Laptops","path":"Electronics->Accessories->Computers->Components->Laptops","children":null},{"id":11,"title":"Cars","path":"Cars","children":[{"id":12,"title":"Electronics","children":[{"id":13,"title":"Accessories","children":[{"id":14,"title":"Chargers","children":[]}]}]}]},{"id":12,"title":"Electronics","path":"Cars->Electronics","children":[{"id":13,"title":"Accessories","children":[{"id":14,"title":"Chargers","children":[]}]}]},{"id":13,"title":"Accessories","path":"Cars->Electronics->Accessories","children":[{"id":14,"title":"Chargers","children":[]}]},{"id":14,"title":"Chargers","path":"Cars->Electronics->Accessories->Chargers","children":null},{"id":15,"title":"DIY","path":"DIY","children":[{"id":16,"title":"Power Tools","children":[{"id":17,"title":"Accessories","children":[{"id":18,"title":"Batteries","children":[]}]}]}]},{"id":16,"title":"Power Tools","path":"DIY->Power Tools","children":[{"id":17,"title":"Accessories","children":[{"id":18,"title":"Batteries","children":[]}]}]},{"id":17,"title":"Accessories","path":"DIY->Power Tools->Accessories","children":[{"id":18,"title":"Batteries","children":[]}]},{"id":18,"title":"Batteries","path":"DIY->Power Tools->Accessories->Batteries","children":null}]

     

    and here i use map() method from where prop catList is passed to component: 

     

        this.props.searchRes.map(cat => {
          if(!cat.path.includes('->')){
            categories.push(<SearchResult filtered={false} title={cat.title} id={cat.id} catList={cat} key={cat.id}/>)
          }
        })

     

    If anybody can see where is issue could please respond could help me here out would be great ! Thanks.

 0 Answer(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: