How to use MessageBird SMS with a form in React?

Question

When I use MessageBird with a phone number that was hardcoded, everything goes well. The message is sent correctly and I am satisfied. The problem is when I try to send an SMS with a form where the user needs to enter the phone number. I am using React Hooks.

function Account() {
  const { authenticate, isAuthenticated, account, chainId, logout } =
    useMoralis();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isAuthModalVisible, setIsAuthModalVisible] = useState(false);
  const [phoneNumber, setPhoneNumber] = useState();

  function phoneNumberFromForm (phone) {
    setPhoneNumber (phone);
    console.log(" phone: ", phoneNumber);
  }


  if (!isAuthenticated || !account) {
    return (
      <>
        <div onClick={() => setIsAuthModalVisible(true)}>
          <p style={styles.text}>Authenticate</p>
        </div>
        <Modal
          visible={isAuthModalVisible}
          footer={null}
          onCancel={() => setIsAuthModalVisible(false)}
          bodyStyle={{
            padding: "15px",
            fontSize: "17px",
            fontWeight: "500",
          }}
          style={{ fontSize: "16px", fontWeight: "500" }}
          width="340px"
        >
          <div
            style={{
              padding: "10px",
              display: "flex",
              justifyContent: "center",
              fontWeight: "700",
              fontSize: "20px",
            }}
          >
            Connect Wallet
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
            {connectors.map(({ title, icon, connectorId }, key) => (
              <div
                style={styles.connector}
                key={key}
                onClick={async () => {
                  try {
                    if (connectorId) {
                      await authenticate({ provider: connectorId });
                      window.localStorage.setItem("connectorId", connectorId);
                    } else {
                      await authenticate();
                    }

                    setIsAuthModalVisible(false);
                  } catch (e) {
                    console.error(e);
                  }
                }}
              >
                <img src={icon} alt={title} style={styles.icon} />
                <Text style={{ fontSize: "14px" }}>{title}</Text>
              </div>
            ))}
          </div>
        </Modal>
      </>
    );
  }

  return (
    <>
      <div style={styles.account} onClick={() => setIsModalVisible(true)}>
        <p style={{ marginRight: "5px", ...styles.text }}>
          {getEllipsisTxt(account, 6)}
        </p>
        <Blockie currentWallet scale={3} />
      </div>
      <Modal
        visible={isModalVisible}
        footer={null}
        onCancel={() => setIsModalVisible(false)}
        bodyStyle={{
          padding: "15px",
          fontSize: "17px",
          fontWeight: "500",
        }}
        style={{ fontSize: "16px", fontWeight: "500" }}
        width="400px"
      >
        Account
        <Card
          style={{
            marginTop: "10px",
            borderRadius: "1rem",
          }}
          bodyStyle={{ padding: "15px" }}
        >
          <Address
            avatar="left"
            size={6}
            copyable
            style={{ fontSize: "20px" }}
          />
          <div style={{ marginTop: "10px", padding: "0 10px" }}>
            <a
              href={`${getExplorer(chainId)}/address/${account}`}
              target="_blank"
              rel="noreferrer"
            >
              <SelectOutlined style={{ marginRight: "5px" }} />
              View on Explorer
            </a>
          </div>
          <div>
          <PhoneInput enableAreaCodeStretch onChange={phone => phoneNumberFromForm({phone})}/>
          </div>
          <Button
          size="small"
          type="primary"
          style={{
            width: "50%",
            marginTop: "10px",
            borderRadius: "0.5rem",
            fontSize: "12px",
            fontWeight: "500",
          }}
          onClick={async () => {
            console.log(" phone number on form", phoneNumber);
            messagebird.messages.create({
              originator : '67528923',
              recipients : '$phoneNumber.phone',
              body : 'testing this function. '
          },
          function (err, response) {
              if (err) {
              console.log("ERROR:");
              console.log(err);
          } else {
              console.log("SUCCESS:");
              console.log(response);
                  }
          });
          }}
        >
          Verify phone number
        </Button>   
        </Card>
        <Button
          size="large"
          type="primary"
          style={{
            width: "100%",
            marginTop: "10px",
            borderRadius: "0.5rem",
            fontSize: "16px",
            fontWeight: "500",
          }}
          onClick={async () => {
            await logout();
            window.localStorage.removeItem("connectorId");
            setIsModalVisible(false);
          }}
        >
          Disconnect Wallet
        </Button>
      </Modal>
    </>
  );
}

export default Account;

Can anyone tell me what I am doing wrong? This is the error I am getting.

Error: api error(s): no (correct) recipients found (code: 9, parameter: recipient)

I believe it must have something to do to how I am calling the recipient's number. I am using this line.

recipients : '$phoneNumber.phone',

I am using the code above, but is it the correct way to call that object?

Answer 1

You guessed it right, the problem is in the place where you call MessageBird API.

messagebird.messages.create({
              originator : '67528923',
              recipients : '$phoneNumber.phone',
              body : 'testing this function. '
          },

recipients should be array of strings (phone numbers), e.g.:

{
  'originator': 'YourBrand',
  'recipients': [
    '31612345678'
  ],
  'body': 'Hello, world!'
}

So I think in your code you need to change it to:

messagebird.messages.create({
              originator : '67528923',
              recipients : [phoneNumber.phone],
              body : 'testing this function. '
          },