Styled component react checkbox doesn't appears

Question

Hello i have a problem with my style , checkbox does'nt appears even with a classical input i tried lot of things but bug continue . i use styled-component, react-hook-form, typescript.

//import tools
import React, { FunctionComponent, useState } from "react";
import styled from "styled-components";
import { useForm, SubmitHandler } from "react-hook-form";

//import model will be useless with api
import Pokemon from "../models/pokemon";

//import helpers
import formatType from "../helpers/format-type";

type Props = {
  pokemon: Pokemon;
};
// type field
type Field = {
  value: any;
  error?: string;
  isValid: boolean;
};
// types form

type Inputs = {
  name: Field;
  hp: Field;
  cp: Field;
  types: Field;
};
// style

const CardHoverable = styled.div``;
const CardImage = styled.div`
  display: flex;
  justify-content: center;
  img {
    width: 250px;
  }
`;
const CardStacked = styled.div``;
const CardContent = styled.div`
  display: flex;
  justify-content: center;
  flex-direction: column;
`;
const FormGroup = styled.div`
  box-shadow: 10px 5px 5px grey;
  margin-bottom: 5px;
`;
const CardAction = styled.div``;
const Input = styled.input.attrs({ type: "checkbox" })`
  display: flex;
  position: absolute;
  width: 50px;
`;
const PokemonForm: FunctionComponent<Props> = ({ pokemon }) => {
  const [form] = useState<Inputs>({
    name: { value: pokemon.name, isValid: true },
    hp: { value: pokemon.hp, isValid: true },
    cp: { value: pokemon.cp, isValid: true },
    types: { value: pokemon.types, isValid: true },
  });

  // const changeValue = () => {
  //   setForm(onSubmit);
  // };
  //types pokemon
  const types: string[] = [
    "Plante",
    "Feu",
    "Eau",
    "Insecte",
    "Normal",
    "Electrik",
    "Poison",
    "Fée",
    "Vol",
    "Combat",
    "Psy",
  ];
  const hasType = (type: string): boolean => {
    return form.types.value.includes(type);
  };

  //form using maybe moved in other folder after
  const {
    register,
    handleSubmit,
    watch,
    // formState: { errors },
  } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
  console.log(watch("name"));
  console.log(watch("hp"));
  console.log(watch("cp"));
  console.log(watch("types"));

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <CardImage>
        <img src={pokemon.picture} alt={pokemon.name} />
      </CardImage>

      <CardHoverable>
        <CardStacked>
          <CardContent>
            {/* Pokemon name */}
            <FormGroup>
              <label>Nom</label>
              <input
                value={form.name.value}
                {...register("name", { required: true, maxLength: 20 })}
              />
            </FormGroup>
            {/* Pokemon hp */}
            <FormGroup>
              <label>Point de vie</label>
              <input
                value={form.hp.value}
                type="number"
                {...register("hp", { min: 1, max: 100, maxLength: 20 })}
              />
            </FormGroup>
            {/* Pokemon cp */}
            <FormGroup>
              <label>Dégâts</label>
              <input
                value={form.cp.value}
                type="number"
                {...register("cp", { min: 1, max: 100, maxLength: 20 })}
              />
            </FormGroup>
            {/* Pokemon types */}
            <FormGroup>
              <label>Types</label>
              {types.map((type) => (
                <div key={type}>
                  <Input
                    type={"checkbox"}
                    id={type}
                    value={type}
                    checked={hasType(type)}
                  ></Input>

                  <p className={formatType(type)}>{type}</p>
                </div>
              ))}
            </FormGroup>
          </CardContent>
          <CardAction>
            {/* Submit button */}
            <input type="submit" name="Valider" />
          </CardAction>
        </CardStacked>
      </CardHoverable>
    </form>
  );
};

export default PokemonForm;

If you know that issue could you help me thanks. i tried to pass in inputs .attrs the type checkbox so i don't know how resolve that situation i have some questions is it problem with styled component or typescript or i didn't saw something that you could see.

Input type with checkbox does not need set value and it should set only checked props — Saeed Hemmati, Feb 09 '22 at 10:18

score 1 · Answer 1 · answered Feb 09 '22 at 10:53

1

Your input has a "position:absolute" css rule. Try to add "position:relative" to FormGroup so it gets positioned relative to it.

From MDN docs : "The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block — see also the W3C definition), which is the containing block of the document's root element."

answered Feb 09 '22 at 10:53

user3407130

46
2

when i inspect the check box exist , i did what you said but i don't know why opacity in inspector are to 0 and when i pass 1 they appears correctly , but when i write opacity:1 in my Input or formGroup nothing appears :/ – Vincent Lebrun Feb 09 '22 at 11:30
don't you have a stylesheet that is loaded and causing that problem of opacity ? – user3407130 Feb 09 '22 at 13:59
yes it was materialize it's my bad i forgot that i used that on begining :/ – Vincent Lebrun Feb 09 '22 at 14:11

score 0 · Answer 2 · answered Feb 09 '22 at 12:44

0

i've import in html materialize so it was the problem

answered Feb 09 '22 at 12:44

Vincent Lebrun

11
1

Styled component react checkbox doesn't appears

2 Answers2