Warning: Received true for a non-boolean attribute show.

If you want to write it to the DOM, pass a string instead: show="true" or show={value.toString()}.

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container } from "react-bootstrap";

const FormTiket = () => {
  const [show, setShow] = useState(true);
  return (
    <div className="bgForm">
      <main className="py-5 px-5">
        <Container>
          <div className="parent">
            <div className="div1 d-flex justify-content-center">
              <h3 className="text-light">Booking</h3>
            </div>
            <div className="div2">
              <a href="/login">
                <h5>Login</h5>
              </a>
            </div>
            <div className="div3 ">
              <label className="form-label" htmlFor="typeDriver">
                Dari
              </label>
              <div className="input-group mb-3">
                <select
                  id="supir"
                  name="supir"
                  className="form-select bg-transparent border-dark"
                >
                  <option value="">Pilih Tipe Driver</option>
                  <option value="true">Dengan Sopir</option>
                  <option value="false">Tanpa Sopir (Lepas Tangan)</option>
                </select>
              </div>
            </div>
            <div className="div4">
              <label className="form-label" htmlFor="typeDriver">
                Dari
              </label>
              <div className="input-group mb-3">
                <select
                  id="supir"
                  name="supir"
                  className="form-select bg-transparent border-dark"
                >
                  <option value="">Pilih Tipe Driver</option>
                  <option value="true">Dengan Sopir</option>
                  <option value="false">Tanpa Sopir (Lepas Tangan)</option>
                </select>
              </div>
            </div>
            <div className="div5">
              <div className="d-flex">
                <div className="form-check">
                  <input
                    onClick={() => setShow(true)}
                    className="form-check-input"
                    type="radio"
                    name="flexRadioDefault"
                    id="flexRadioDefault1"
                  />
                  <label className="form-check-label" htmlFor="flexRadioDefault1">
                    Sekali Jalan
                  </label>
                </div>
                <div className="form-check">
                  <input
                    onClick={() => setShow(false)}
                    className="form-check-input"
                    type="radio"
                    name="flexRadioDefault"
                    id="flexRadioDefault1"
                  />
                  <label className="form-check-label" htmlFor="flexRadioDefault1">
                    Pulang Pergi
                  </label>
                </div>
              </div>
              <label className="form-label" htmlFor="typeDriver">
                Date :
              </label>
              <div className="input-group mb-3">
                <input
                  show={show}
                  type="date"
                  name="date"
                  id="date"
                  className="form-control bg-transparent border-dark"
                  placeholder="Pilih Tanggal"
                />
                {!show && (
                  <input
                    type="date"
                    name="date"
                    id="date"
                    className="form-control bg-transparent border-dark"
                    placeholder="Pilih Tanggal"
                  />
                )}
              </div>
            </div>
            <div className="div6">
              <label className="form-label" htmlFor="tipeDriver">
                Penumpang
              </label>
              <input
                type="number"
                name="penumpang"
                id="penumpang"
                className="form-control bg-transparent border-dark"
                placeholder="Jumlah Penumpang"
              />
            </div>
            <div className="div7">
              <label className="form-label" htmlFor="typeDriver">
                Class
              </label>
              <div className="input-group mb-3">
                <select
                  id="supir"
                  name="supir"
                  className="form-select bg-transparent border-dark"
                >
                  <option value="">Pilih Tipe Driver</option>
                  <option value="true">Dengan Sopir</option>
                  <option value="false">Tanpa Sopir (Lepas Tangan)</option>
                </select>
              </div>
            </div>
            <div className="div8 d-grid">
              <div
                className="d-grid gap-2"
                style={{ position: "relative", top: "30px" }}
              >
                <button
                  className="btn btn-light shadow py-2 mb-5 bg-body rounded"
                  type="submit"
                >
                  <b>Cari Tiket</b>
                </button>
              </div>
            </div>
          </div>
        </Container>
      </main>
    </div>
  );
};

export default FormTiket;

id do something like this but still wrong idk why

                <input
                  show="true
                  type="date"
                  name="date"
                  id="date"
                  className="form-control bg-transparent border-dark"
                  placeholder="Pilih Tanggal"
                />
                {show == false && (
                  <input
                    type="date"
                    name="date"
                    id="date"
                    className="form-control bg-transparent border-dark"
                    placeholder="Pilih Tanggal"
                  />
                )}
              </div>

CodePudding user response：

"show" is not a valid attribute for inputs.

If I understand, you want to show one or another input, based on the value of "show", correct?

You can do it using a ternary operator.

{show ? (
 <input
    type="date"
    name="date"
    id="date"
    className="form-control bg-transparent border-dark"
    placeholder="Pilih Tanggal"
  />
  ) : (
    <input
      type="date"
      name="date"
      id="date"
      className="form-control bg-transparent border-dark"
      placeholder="Pilih Tanggal"
    />
  )}

CodePudding user response：

I had this problem using styled-components and in their documentantion it says to use a $ before the props, like so:

<input
  $show={show}
  type="date"
  name="date"
  id="date"
  className="form-control bg-transparent border-dark"
  placeholder="Pilih Tanggal"
/>

This way the DOM will ignore this as an HTML attribute and won't complain about booleans (or numbers, or anything, really)

CodePudding user response：

It is unclear what exactly you are trying to do. It looks like you are trying to conditionally render content based on whether your state is true or false. The error you are getting is a result of the following

`<input
 show={show}
 type="date"
 name="date"
 id="date"
 className="form-control bg-transparent border-dark"
 placeholder="Pilih Tanggal"/>`

Show is not an attribute for any HTML elements. Try the following. This will get rid of the error you are running into.

`<input
 type="date"
 name="date"
 id="date"
 className="form-control bg-transparent border-dark"
 placeholder="Pilih Tanggal"/>`