score:1

Accepted answer

you are not passing the id in categories.jsx. either you can set the id in the history state or do pass it by component prop drill.

setting the state in history programmatically set params in react router v4

or you can do pass the id to the component and handle in component didmount event.

here is the code sandbox link

categories.jsx


/** create a id variable in state. **/
class categories extends component {
                        constructor(props) {
                            super(props);
                            this.state = {
                                categories: [],
                                isloaded: false,
                                error: null,
                                isopen: false,
                               --> id: null <--
                            };
                        }
            
/** change the openmodal code to something like this. **/
openmodal = (id) => {
                  this.setstate( (prev) => {
                      const state = prev.state;
                      return { ...state, id: id, isopen:true };
                    });
                    };
    
                           
/** while onclick set the id in the state. **/
<datatable>
                    <table classname="table table-striped my-4 w-100">
                      <thead>
                        <tr>
                          <th>id</th>
                          <th>title</th>
                          <th>url (slug)</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>
                        {categories.map((category) => (
                          <tr key={category.id}>
                            <td>{category.id}</td>
                            <td>{category.title}</td>
                            <td>{category.slug}</td>
                            <td>
                              <button
                                classname="float-right mr-2"
                                variant="primary"
                             -->   onclick={() =>this.openmodal(category.id)}
                              >
                                modal edit
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </datatable>
               
             
/** pass the id prop for categoryform component in modal body from the state. **/

 <modal show={this.state.isopen} onhide={this.closemodal} >
                              <modal.header closebutton>
                                <modal.title>adicionar / editar</modal.title>
                              </modal.header>
                              <modal.body>
                              -->  <categoryform id={this.state.id || null} />
                              </modal.body>
                              <modal.footer>
                                <button variant="secondary" onclick=  {this.closemodal}>
                                  close
                                </button>
                              </modal.footer>
                            </moddal>

categoryform.jsx

in the componentdidmount conditionally check if there is id variable in props.


  componentdidmount() {
    **// check if props.id is available** 
        if (** this.state.category.id || this.props.id **) {
              **const id = this.state.category.id || this.props.id;**
                api.getcategory(id).then((response) => {
                    const [error, data] = response;
                    if (error) {
                        this.setstate({
                            errors: data
                        });
                    } else {
                        alert(id);
    
                        this.setstate({
                            category: data,
                            errors: []
                        });
                    }
                });
        }
    }

score:1

you can add more state to categories to keep track of additional data about the modal.

*i have only included the highlights in the code here; lots was left out for brevity.

in categories.jsx:

  constructor(props) {
    super(props) 
    this.state = {
      categories: [],
      isloaded: false,
      error: null,
      isopen: false,
      modaldata: null,
    }
  }

  openmodal = (modaldata) => this.setstate({ isopen: true, modaldata });
  closemodal = () => this.setstate({ isopen: false, modaldata: null });

  //'create' dialog button
        <button classname="float-right" variant="primary" onclick={e => this.openmodal({modaltype: 'create'})}>
          adicionar
        </button>


    //here are the table rows:
   {categories.map(category => (
              <tr key={category.id}>
                <td>{category.id}</td>
                <td>{category.title}</td>
                <td>{category.slug}</td>
                <td>
                

                  <button classname="float-right mr-2" variant="primary" onclick={e => this.openmodal({modaltype: 'edit', categoryid: category.id})}>
                    modal edit
                  </button>

                </td>
              </tr>
            ))}

      //the modal. pass modaldata as a prop:
     <modal show={this.state.isopen} onhide={this.closemodal}>
          <modal.header closebutton>
            <modal.title>adicionar / editar</modal.title>
          </modal.header>
          <modal.body>
            <categoryform modaldata={modaldata} />
          </modal.body>
          <modal.footer>
            <button variant="secondary" onclick={this.closemodal}>
              close
            </button>
          </modal.footer>
        </modal>

in categoryform.jsx:

  //get id from props:
  getcategoryid(props) {
    return (props.modaldata.modaltype === 'edit') ? props.modaldata.categoryid : false;

    //i don't know if this needs to be here:
    //try {
    //  return props.match.params.id
    //} catch (error) {
    //  return null
    //}
  }

you might have to refactor categoryform.jsx. for instance, the categoryid is now a prop, so it doesn't need to be duplicated in state.


Related Query

More Query from same tag