How to bind the elements to the modal in React?

Question

I am using rendering elements from dynamodb using serverless and showing in a card dashboard and when i am editing the card i want to see the contents that are already present in the card .

Edit.js

import React, { Component } from "react";
import { Form, Modal, Button, Container, Icon } from "semantic-ui-react";
import Amplify, { API } from "aws-amplify";
const uuidv1 = require("uuid/v1");

class EditItemModal extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.state = { item: this.props.item };
  }

  deleteItem() {
    let apiName = "ServerlessReactExampleCRUD";
    let path = "/ServerlessReactExample/object/" + this.props.item[0].ID;
    API.del(apiName, path)
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error.response);
      });
    this.props.getItems();
    this.handleClose();
  }

  handleChange(event, { name, value }) {
    this.setState({ [name]: value });
  }

  handleSubmit(event) {
    let apiName = "ServerlessReactExampleCRUD";
    let path = "/ServerlessReactExample";
    let editItem = {
      body: {
        ID: this.props.item[0].ID,
        name: this.state.name,
        price: this.state.price,
        description: this.state.description
      }
    };
    API.put(apiName, path, editItem)
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error.response);
      });
    this.props.getItems();
    this.handleClose();
    event.preventDefault();
  }

  handleOpen = () => this.setState({ modalOpen: true });

  handleClose = () => this.setState({ modalOpen: false });

  render() {
    return (
      <Container style={{ padding: 10 }}>
        <Modal
          trigger={
            <Button icon onClick={this.handleOpen}>
              <Icon name="edit" />
            </Button>
          }
          open={this.state.modalOpen}
          closeIcon
          onClose={this.handleClose}
        >
          <Modal.Header>Edit</Modal.Header>
          <Modal.Content>
            <Form onSubmit={this.handleSubmit}>
              <Form.Group unstackable widths={2}>
                <Form.Input
                  name="name"
                  label="Item Name"
                  placeholder="Edit Item Name..."
                  onChange={this.handleChange}
                  value={this.state.name}
                />
                <Form.Input
                  name="price"
                  label="Item Price"
                  placeholder="£0.00"
                  onChange={this.handleChange}
                  value={this.state.price}
                />
              </Form.Group>
              <Form.TextArea
                name="description"
                label="Item Description"
                placeholder="Edit Description of the Item..."
                onChange={this.handleChange}
                value={this.state.description}
              />
              <Form.Button type="submit">Submit</Form.Button>
            </Form>
          </Modal.Content>
          <Modal.Actions>
            <Button icon labelPosition="left" onClick={this.deleteItem}>
              <Icon name="delete" />
              Delete Item
            </Button>
          </Modal.Actions>
        </Modal>
      </Container>
    );
  }
}

export default EditItemModal;

This is how the card looks like

When i clicked on edit button it will look like this

What i want to show the values that are present in the card ? I want to know how i can bind them to show in the card ?

Any help is appreciated.

Ref : Ref links

Answer 1

As Simão wrote you're probably accessing wrong element

this.state = { item: this.props.item };

creates this.state.item (with your values/properties inside ?)

If you don't want to change everything probably this will fix it:

this.state = { ...this.props.item };

I would move operations into parent to keep all (CRUD) in one place. Updating/deleting item on list in handlers could avoid unnecessary list reloading (getItems) and done before api call would work as optimistic update.