---
title: EditActions
category: General
summary: Helper component that manages switching between initial and editing states of inline forms. It uses an optimisitic save that will render a checkmark after the loading prop has been set to `false`.
---

```jsx live
class EditActionsExample extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 'Edit this value',
      isBusy: false,
    }
  }

  render() {
    const { value, isBusy } = this.state
    const resetBusy = () => {
      setTimeout(() => this.setState({ isBusy: false }), 2000)
    }
    return (
      <EditActions
        display={<Text>{value}</Text>}
        edit={
          <Input
            autoFocus
            value={value}
            onChange={(e) =>
              this.setState({ value: e.target.value, isBusy: true }, resetBusy)
            }
          />
        }
        loading={isBusy}
      />
    )
  }
}

render(EditActionsExample)
```

```jsx live
const candies = [
  {
    label: 'Wonka Bar',
    value: 'wonka-bar',
  },
  {
    label: 'Bubblegum',
    value: 'bubblegum',
  },
  {
    label: 'Raisins',
    value: 'raisins',
  },
  {
    label: 'Oranges',
    value: 'oranges',
  },
]

class EditActionsExample extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: {
        name: 'Charlie',
        favoriteCandy: ['wonka-bar'],
      },
      isBusy: false,
    }
  }

  render() {
    const { value, isBusy } = this.state
    const resetBusy = () => {
      setTimeout(() => this.setState({ isBusy: false }), 2500)
    }
    return (
      <EditActions
        display={
          <Text>
            {value.name}'s favorite candy is{' '}
            <StackView inline as="span" axis="horizontal" spacing=", ">
              {candies
                .filter(
                  (candy) => value.favoriteCandy.indexOf(candy.value) > -1
                )
                .map((candy) => candy.label)}
            </StackView>
          </Text>
        }
        edit={[
          <Input
            autoFocus
            value={value.name}
            onChange={(e) =>
              this.setState(
                {
                  value: {
                    ...value,
                    name: e.target.value,
                  },
                  isBusy: true,
                },
                resetBusy
              )
            }
          />,
          <Select
            matchWidths={false}
            multiple
            placement="bottom-start"
            value={value.favoriteCandy}
            onChange={(e) =>
              this.setState(
                {
                  value: {
                    ...value,
                    favoriteCandy: e.value,
                  },
                  isBusy: true,
                },
                resetBusy
              )
            }
          >
            {candies.map((candy) => (
              <Select.Option key={candy.value} value={candy.value}>
                {candy.label}
              </Select.Option>
            ))}
          </Select>,
        ]}
        loading={isBusy}
      />
    )
  }
}

render(EditActionsExample)
```