Juan Cabello's questions

I have this warning inside this useEffect:

useEffect(() => {
    setProyecto({
        ...proyecto,
        urlFirebase: urlImg
    })
}, [urlImg]);

React Hook useEffect has a missing dependency: 'project'. Either include it or remove the dependency array. You can also do a functional update 'setProject(p => ...)' if you only need 'project' in the 'setProject' call react-hooks/exhaustive-deps

I tried to do what appears in the warning but it does not replace the value I want, it removes everything from the state that is an object and leaves it as a String with the url. This is the useEffect I made

useEffect(() => {
    setProyecto(p => p.urlFirebase = urlImg);
}, [urlImg]);

I have a versus which is launching random characters. On one side I have character1 and on the other character2 and in the middle the word vs. The problem is that since they are random words, the "vs" is never centered since there are words larger than others and this one rotates a lot and I have things like these

I want that regardless of the word, the "vs" is always centered even if the characters are different.

<p className="tematica__versus">{tematicaRandom.personaje1}
  <span className="tematica__vs">vs</span>
  {tematicaRandom.personaje2}
</p>



.tematica__versus{
        font-size: 80px;
        color: #e1e1e1e1;
        font-weight: 700;
        margin-top: 70px;
        text-align: center;
    }

    .tematica__vs{
        padding: 0 20px;
    }

2 things. The first: I don't know how to program in Java and I'm following it as a kind of guide but the one who made that guide wrote the code with many errors and I have had to fix it by searching forums and things like that. The detail is that a JFrame was created and the code to be placed was explained, but the JFrame has so many functions that it did not specify exactly where the code goes. Is this

persona p;

    private void formWindowOpened(java.awt.event.WindowEvent evt)    {
                //Obejeto para almacenar datos
                Object[][] dtPer;
                String[] columNames = {"id", "Nombre", "Ap. Paterno", "Ap. Materno", "E-Mail"};
                //se utiliza la función
                dtPer = p.getDatos();
                //Se colocan los datos en la tabla
                DefaultTableModel datos = new DefaultTableModel(dtPer, columNames);
                tabla.setModel(datos);
    }
    

Where exactly does it go? and you're passing parameters and you also didn't specify what they're for since "evt" isn't being used.

The second: I have this JFrame in a different package than where I have the Main class. How do I call that JFrame from the Main so that it is executed?

I am building a page with bootstrap and I already got the navbar and footer to be responsive but the body I don't know how to do it. just like I have a side browser that accompanies the user. Here I show you the html code

<div class="container-fluid fondoblanco shadow-lg col-8">
            <div style="padding-bottom: 100px;">
                <img
                    class="logo"
                    align="center"
                    src="img/index/quienesSomos.png"
                    alt="logo"
                    style="max-width: 100%; height: auto;"
                />
            </div>
            <div
                class="row text-light jumbotron shadow"
                style="background-color: #1c2a48;"
            >
                <div class="col-6">
                    <div class="p-5">
                        <h2 class="" align="left">¿Qué es Bitonoff?</h2>
                        <p class="text-justify parrafo">
                            Grupo Bitonoff C.A les Ofrece Las mejores ofertas en curso.
                            Nuestros certificados son <b>100% apostillables</b>.
                        </p>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-5">
                        <h2 class="" align="left">Lorem</h2>
                        <p class="text-justify parrafo">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
                            totam consequatur architecto vero dolor magni fugiat dolorem
                            repudiandae voluptatem. Minus nam accusamus rem facilis,
                            aspernatur placeat enim alias aliquid iste.
                        </p>
                    </div>
                </div>
            </div>
            <div class="container py-5">
                <div class="row">
                    <div class="col tarjetacentro">
                        <div class="card shadow-lg redounded" style="width: 13rem;">
                            <img
                                class="card-img-top"
                                src="img/index/muestra/marcha.jpg"
                                alt="Imagen Muestra"
                            />
                            <div class="card-body">
                                <h5 class="card-title text-center">Día del músico</h5>
                                <p class="card-text text-center">
                                    Marcha día del músico 2019
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col tarjetacentro">
                        <div class="card shadow-lg redounded" style="width: 13rem;">
                            <img
                                class="card-img-top"
                                src="img/index/muestra/diploma.jpg"
                                alt="Imagen Muestra"
                            />
                            <div class="card-body">
                                <h5 class="card-title text-center">Diploma</h5>
                                <p class="card-text text-center">
                                    Entrega de Diploma "Pedro Gual"
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card shadow-lg redounded" style="width: 13rem;">
                            <img
                                class="card-img-top"
                                src="img/index/muestra/orquesta.jpg"
                                alt="Imagen Muestra"
                            />
                            <div class="card-body">
                                <h5 class="card-title text-center">Orquesta Caripito</h5>
                                <p class="card-text text-center">
                                    Orquesta sinfónica Infantil
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container py-5 experiencia">
                <h2 class="titulo text-center">
                    <b>
                        Con más de 10 años de experiencia
                    </b>
                </h2>
            </div>
        </div>

And the side browser is like this

<div class="social">
            <ul class="shadow-lg rounded">
                <li class="">
                    <a class="" href="https://www.facebook.com/" target="_blank">
                        <img
                            src="img/redes/facebookF.svg"
                            alt="facebook"
                            width="30"
                            height="40"
                        />
                    </a>
                </li>
                <li class="">
                    <a class="" href="https://www.twitter.com/" target="_blank">
                        <img
                            src="img/redes/twitterF.svg"
                            alt="twitter"
                            width="30"
                            height="40"
                        />
                    </a>
                </li>
                <li class="">
                    <a class="" href="https://www.instagram.com/" target="_blank">
                        <img
                            src="img/redes/instagramF.svg"
                            alt="instagram"
                            width="30"
                            height="40"
                        />
                    </a>
                </li>
            </ul>
        </div>

My doubt is... How do I make it responsive and I would like to learn since this is only the index of the page. Also in the sidebar how would I do? would it stay fixed there or is there a way to make it also responsive? this is what my sidebar looks like

I have a table where it shows me the data of a user but the mail column collides with the category column. How can I make the table fit?

Here I leave the html code of the table, it is inside a form but I don't think it has that much relevance. What I am interested in knowing is how I avoid that ugly thing above, if there is a solution with css, with bootstrap, etc. Thank you

<table class="table table-striped table-bordered table-hover" >
            <thead class="thead-dark" >
                <tr>       
                    <th>cedula</th>
                    <th>Nombre</th>
                    <th>apellido</th>
                    <th>Fecha Del Aporte</th>
                    <th>Aporte Asociado</th>
                    <th>Fecha Aporte del Asociado</th>
                    <th>Aporte Patrono</th>
                    <th>Fecha Aporte del Patrono</th>
                    <th>Monto total</th>
                    <th>Estado</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> <?php echo $cedula ?> </td>
                    <td> <?php echo $nombre ?> </td>
                    <td> <?php echo $apellido ?> </td>
                    <td><input type="date" class="form-control" name="fechaAporte" placeholder="Fecha del Aporte" value="<?php echo $fechaAporte; ?>"></td>
                    <td><input type="number" class="form-control" name="aporteAsociado" placeholder="Fecha del Pago" value="<?php echo $aporteAsociado; ?>"></td>
                    <td><input type="date" class="form-control" name="fechaPagoAsociado" placeholder="Monto del Aporte" value="<?php echo $fechaPagoAsociado; ?>"></td>
                    <td><input type="number" class="form-control" name="aportePatrono" placeholder="Tipo de Aporte" value="<?php echo $aportePatrono; ?>"></td>
                    <td><input type="date" class="form-control" name="fechaAportePatrono" placeholder="Estado del aporte" value="<?php echo $fechaAportePatrono; ?>"></td>
                    <td><input type="number" class="form-control" name="montoAporte" placeholder="Estado del aporte" value="<?php echo $montoAporte; ?>"></td>
                    <td><input type="number" class="form-control" name="estado" placeholder="Estado del aporte" value="<?php echo $estado; ?>"></td>


                <tr>

            </tbody>
        </table>
        <br>


        <button type="submit" class="btn btn-primary" name="btnGuardar">Guardar Cambios</button> 

I have a table with a form to show me the registered users on one side and the input of each one to fill in on the other, but when filling in the data it gives me an error. Here is the form. This is the solution that was given to me. I will be waiting to respond as quickly as possible

 <form method="POST">

        <table class="table table-striped table-sm  table-bordered table-hover">
        <div class="col-3">
            <label for="fechaAporte"><h3><b>Fecha del Aporte</b></h3></label>
            <input type="date" class="form-control" name="fechaAporte" required>
        </div>
        <br>
            <thead class="thead-dark">
                <tr>
                    <th>Cedula</th>
                    <th>Nombre</th>
                    <th>apellido</th>

                    <th>Aporte Asociado</th>
                    <th>Fecha Pago del Asociado</th>
                    <th>Aporte Patronal</th>
                    <th>Fecha del Aporte Patronal</th>
                    <th>Total del Monto Aportado</th>
                    <th>Acción</th>

                </tr>
            </thead>
            <tbody>
                <?php                
                $resultadoBus = mysqli_query($mysqli, "SELECT * FROM asociado WHERE tipoUsuario = 2");

                while ($row = mysqli_fetch_array($resultadoBus)) { 

                    ?>
                    <tr>
                    <td><?php echo $row['cedula']; ?></td>
                    <td><?php echo $row['nombre']; ?></td>
                    <td><?php echo $row['apellido']; ?></td>
                  <!-- while de Haberes -->
                    <td><input type="number" name="aporteAsociado[]" class="form-control" id="aporte1" ></td>
                    <td><input type="date" name="fechaPagoAsociado[]" class="form-control" id="fechaPagoAsociado" ></td>
                    <td><input type="number" name="aportePatrono[]" class="form-control" id="aporte2"></td>
                    <td><input type="date" name="fechaAportePatrono[]" class="form-control" id="fechaAportePatrono"></td>
                    <td><input type="number" name="montoAporte[]" class="form-control" id="total"></td>
                    <input type="hidden" name="cedulaArray" value="<?php echo $row['cedula']; ?>">


                    <td>

                        <button type="submit" name="btnCrearHaber" class="btn btn-success">Registrar Aporte</button>

                    </td>


                    <tr>
                <?php } ?>

            </tbody>

</table>    

 </form>

And here is the PHP to save the data, I imagine that it is the one that is giving me errors in the logical part, I tried to hit it with these arrays using a variable to go through but it does not save anything in the database

  if (!empty($_POST)){

    if(isset($_POST['btnCrearHaber'])) {

        $contadorHaber = count($_POST['cedulaArray']);

        for($i = 0; $i<$contadorHaber; $i++){

        $cedulaAsociado = $_POST['cedulaArray'] [$i];
        $fechaAporte = $_POST['fechaAporte'] [$i];
        $aporteAsociado = $_POST['aporteAsociado'] [$i];
        $fechaPagoAsociado = $_POST['fechaPagoAsociado'] [$i];
        $aportePatrono = $_POST['aportePatrono'] [$i];
        $fechaAportePatrono = $_POST['fechaAportePatrono'] [$i];
        $montoAporte = $_POST['montoAporte'] [$i];
        $estado = 0;
        $insertando = "INSERT INTO haber (cedulaAsociado, fechaAporte , aporteAsociado, fechaPagoAsociado, aportePatrono, fechaAportePatrono, montoAporte, estado)
                                VALUES ('$cedulaAsociado', '$fechaAporte', '$aporteAsociado', '$fechaPagoAsociado', '$aportePatrono', '$fechaAportePatrono', '$montoAporte', '$estado')";

        $resultado =  mysqli_query($mysqli, $insertando);
        }

I have a form which is very extensive since there are many fields to fill out and they are mandatory. I show them all in a modal but there are other data to fill and these are optional and I don't want to show them unless the user or administrator wants to see it. I wanted to know if there is a method for that, to hit next or check a box, press a button, whatever, so that it displays the rest of the form to fill out and at the end saves the data