How to update functional react component

I’m working on a Dapp project using React & Drizzle, similar to the ToDo Dapp :wink: where the contract would be added dynamically after initialization. Each components (Component1 & Component2) will add the contract dynamically after the user enter contractAddress & contractAddress from the frontend.

What I am struggling with is how to update Container.js after submitting the form so that contractAddress & contractAddress can be updated and passed to the components?

Below is uncompleted my code. Any help?

import React, { Component } from "react";
import { DrizzleContext } from "drizzle-react";
import LoadingComponent from "../../LoadingComponent";
import Component1 from "./Component1";
import Component2 from "./Component2";

var x = false;
//var contractAddress = "0x9F765f19fc674D913A68a7695208e3C9D510c3f3";
//var contractName = "contractName";

var contractAddress;
var contractName;

function onsubmit(address, name) {
  contractAddress = address;
  contractName = name;
  x = true;
}

const Container = () => (
  <div>
    {x ? (
      <DrizzleContext.Consumer>
        {drizzleContext => {
          const { initialized, drizzleState, drizzle } = drizzleContext;

          return (
            <LoadingComponent initialized={initialized}>
              <div>
                <Component1
                  contractName={contractName}
                  contractAddress={contractAddress}
                  drizzleState={drizzleState}
                  drizzle={drizzle}
                />

                <Component2
                  contractName={contractName}
                  contractAddress={contractAddress}
                  drizzleState={drizzleState}
                  drizzle={drizzle}
                />
              </div>
            </LoadingComponent>
          );
        }}
      </DrizzleContext.Consumer>
    ) : (
      <form onSubmit={onsubmit}>
        <div>
          <label>Contract Address</label>
          <input id="contractAddress" />
        </div>

        <div>
          <label>Contract Name</label>
          <input id="contractName" />
        </div>
        <button>Access Contract</button>
      </form>
    )}
  </div>
);

export default Container;

Hi Faisal, you need to define your state in Container, and update it in the form event handler.

(need React > 16.8)

import React, { useState } from 'React';

const Container = () => {
  const [contract, setContract] = useState(undefined);

  const onSubmit = e => {
    ...
    setContract({contractName: ..., contractAddress: ...});
  }

  return (
    contract ? (
      ...
    ) : (
      ...
    )
  )
}