Skip to content

Reactive UI updates are not working at all #8

Open

Description

@Tibz-Dankan
export const someForm = () => {
  const [alert, setAlert] = useState({ type: "", message: "" });
 
  const submitHandler = async () => {
    try {
      // Make actual API call here
      setAlert({
        type: "success",
        message: "some response message from api call",
      });
    } catch (error) {
      setAlert({ type: "error", message: error.message });
    }
  };

  const UI = html`<div>
    <form>
      <div>
        ${alert.current().message &&
        html`<div>
          ${Alert({
            type: alert.current().type,
            message: alert.current().message,
          })}
        </div>`}
      </div>
      <button type="button" onClick="${submitHandler}">Submit</button>
    </form>
  </div>`;

  return reactive(() => UI);
};

The code tries to show an alert message based on the API response but it is not shown upon response. The alert variable updates to the latest value.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions