Giovanny's questions

import DocumentPicker from 'react-native-document-picker';

const App = () => {
  const [singleFile, setSingleFile] = useState('');
  
  const selectOneFile = async () => {
    try {
      const res = await DocumentPicker.pick({
        type: [DocumentPicker.types.allFiles],
      });
      console.log('res : ' + JSON.stringify(res));
      console.log('URI : ' + res.uri);
      console.log('Type : ' + res.type);
      console.log('File Name : ' + res.name);
      console.log('File Size : ' + res.size);
      setSingleFile(res);
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        alert('Canceled from single doc picker');
      } else {
        alert('Unknown Error: ' + JSON.stringify(err));
        throw err;
      }
    }
  };
  
  return (
  <TouchableOpacity
          activeOpacity={0.5}
          style={styles.buttonStyle}
          onPress={selectOneFile}>
          <Text style={{marginRight: 10, fontSize: 19}}>
            Click here to pick one file
          </Text>
          <Image
            source={{
              uri: 'https://img.icons8.com/offices/40/000000/attach.png',
            }}
            style={styles.imageIconStyle}
          />
        </TouchableOpacity>
        <Text style={styles.textStyle}>
          File Name: {singleFile.name ? singleFile.name : ''}
          {'\n'}
          Type: {singleFile.type ? singleFile.type : ''}
          {'\n'}
          File Size: {singleFile.size ? singleFile.size : ''}
          {'\n'}
          URI: {singleFile.uri ? singleFile.uri : ''}
          {'\n'}
        </Text>
  
  )

import RNPickerSelect, { defaultStyles }  from 'react-native-picker-select';
    export const Pagina6Screen = ({navigation}) => {
    const [errorEmail,setErrorEmail ] = useState("")
    const [errorConfirm,setErrorConfirm ] = useState("")
    const registerUser =()=>{
      if(!validateData()){
        return;
      }
      //evento si ha seleccionado algo en el select
      navigation.replace('Pagina7Screen')
    }
    const validateData = () =>{
       setErrorConfirm("")
       setErrorEmail("")
       let isvalid = true
       if(!miselect){
        Alert.alert(
          "CAMPO OBLIGATORIO",
          "NO SELECCIONO NADA EN EL SELECT",
          [
            {
              text: "Aceptar",
              style: "cancel",
              
            },
          ],
          {
            cancelable: true,      
          }
        );
        isvalid = false
       }
       setErrorEmail("*")
       return isvalid
    }
    //select
    const miselect = {
      label: 'T.Doc',
      value: null,
      color: '#9EA0A4'
      
    };
    <RNPickerSelect 
    onValueChange={(value) => console.log(value)}
    placeholder={miselect}
    items={[
    { label: 'Cedula', value: 'Cedula' },
    { label: 'Pasaporte', value: 'Pasaporte' }
    ]}
    style={{
    inputAndroid: {
    borderColor:"black",
    }
    }}
<TouchableOpacity
           onPress={() => registerUser()}        
          >
              <Image source={require('../assets/guardar.png')} />
          </TouchableOpacity>
    />

import React,{useState} from 'react'

function Pruebas3() {

  const [value2, setValue2] = useState("");

  const handlerOnClick = (e) => {
    // console.log(e.target.value) // si || no
    setValue2(e.target.value)
  }
  
  return (
    <div>
        <div className="col-sm-6">
        <div className="form-check">

        <input
            type="button"
            name="boton1"
            value="no"           
            onClick={handlerOnClick}
        /> 
        
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
          <input
            type="button"
            name="boton1"
            value="si"           
            onClick={handlerOnClick}
          /> 
        </div>
      </div>

      <div className="col-sm-7">
        {value2 === "si" && (
          <div className="card">
            <div className="card-body">
              <h1>DIV si</h1>
              <input type="text" name="div1" />
            </div>
          </div>
        )}
      </div>


      <div className="col-sm-7">
        {value2 === "no" && (
          <div className="card">
            <div className="card-body">
              <h1>DIV no</h1>
              <input type="text" name="div2" />
            </div>
          </div>
        )}
      </div>
      
    </div>
  )
}

export default Pruebas3

import React, { useState, useEffect } from "react";
import MaterialTable from "@material-table/core";

import axios from "axios";

function App() {
  const [data, setData] = useState([]);

  const peticionGet = async () => {
    await axios
      .get(
        `https://parqueoenvia.co/apiParqueoenvia/operadores/arqueo_cargar.php?id_operador=59`
      )
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  useEffect(() => {
    const interval = setInterval(() => {
      peticionGet();
    }, 3000);

    return () => setInterval(interval);
  }, []);

  const columnas = [
    {
      title: "FECHA",
      field: "fecha_hora"
    },

    {
      title: "age",
      field: "valor_t2"
    }
  ];

  return (
    <div id="content" className="app-content">
      <div className="panel-body">
        {data.length === 0 ? (
          <p>cargando...</p>
        ) : (
          <MaterialTable
            columns={columnas}
            data={data}
            // title={ }
            // backIconButtonText='Página anterior'
            pagination
            fixedHeader
            renderSummaryRow={({ column, data }) =>
              column.field === "valor_t2"
                ? {
                    value: data.reduce(
                      (agg, row) => agg + Number(row.valor_t2),
                      0
                    ),
                    style: { background: "red" }
                  }
                : undefined
            }
            actions={[]}
            options={{
              actionsColumnIndex: -1,
              actionsCellStyle: {},

              body: {
                emptyDataSourceMessage: "No hay registros que mostrar"
              }
            }}
          />
        )}
      </div>
    </div>
  );
}

export default App;

<?php

$txtNombre=(isset($_POST['valor_t2']))?$_POST['valor_t2']:"";
$txtFoto=(isset($_FILES['txtFoto']["name"]))?$_FILES['txtFoto']["name"]:"";

include ("conexion/conexion.php");
      
      $sentencia=$pdo->prepare("INSERT INTO empleados(valor_t2,foto) VALUES (:valor_t2,:foto)");
      $sentencia->bindParam(':valor_t2',$txtNombre);
      
      $Fecha = new DateTime();
      $nombreArchivo=($txtFoto!="")?$Fecha->getTimestamp()."_".$_FILES["txtFoto"]["name"]:"default.jpg";
      $tmpFoto = $_FILES["txtFoto"]["tmp_name"];
      if($tmpFoto!=""){
          move_uploaded_file($tmpFoto,"Imagenes/".$nombreArchivo);
      }
      
      //codigo que intente agregar para comprimir la imagen pero no funciona
      ////////////////////////////////////
     function comprimirImagen($recurso, $destino, $calidad) { 

   $imgInfo = getimagesize($recurso); 
   $mime = $imgInfo['mime']; 
 
  //Creamos una imagen temporal
  switch($mime){ 
case 'image/jpeg': 
    $imagen = imagecreatefromjpeg($recurso); 
    break; 
case 'image/png': 
    $imagen = imagecreatefrompng($recurso); 
    break; 
case 'image/gif': 
    $imagen = imagecreatefromgif($recurso); 
    break; 
default: 
    $imagen = imagecreatefromjpeg($recurso); 
  } 
 
  // Guardamos la imagen
  imagejpeg($imagen, $destino, $calidad);  

comprimirImagen($_FILES["txtFoto"]["tmp_name"],'',80);
      
      ///////////////////////////////////
      
      $sentencia->bindParam(':foto',$nombreArchivo);
      $sentencia->execute();
      
  
?>

import React, { useState } from 'react'
import { Button } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button title="Open" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false)
          setDate(date)
        }}
        onCancel={() => {
          setOpen(false)
        }}
      />
    </>
  )
}

import React, {useState} from 'react';
import axios from 'axios';

import {
  Grid,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper
} from "@material-ui/core";
import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import DeleteIcon from "@material-ui/icons/Delete";

const StyledTableRow = withStyles((theme) => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.action.hover
    }
  }
}))(TableRow);

const options = [
  { value: 1, label: 1 },
  { value: 2, label: 2 },
  { value: 3, label: 3 }
];

function Pruebas() {
    const baseUrlAd = 'https://www.inventarios.gemcont.com/apiGemcont/compras/ingresos/'; 
    const [data, setData]=useState([]);
    const [frameworkSeleccionado, setFrameworkSeleccionado]=useState({
        id_ingreso:'',
        nombre:'',
        dato1:'',
        dato2:''
      });

    const handleChange=e=>{
        const {name, value}=e.target;
        setFrameworkSeleccionado((prevState)=>({
          ...prevState,
          [name]: value
        }))
       console.log(frameworkSeleccionado);
      }

      const peticionPost = async() =>{
        var f = new FormData();
        f.append("nombre", frameworkSeleccionado.nombre);

        f.append("dato1", frameworkSeleccionado.dato1);
        f.append("dato2", frameworkSeleccionado.dato2);
        f.append("METHOD", "POST_prueba");
        await axios.post(baseUrlAd,f)
        .then(response=>{
         setData(data.concat(response.data));
        }).catch(error=>{
          console.log(error);
        })
    
      }


  const [roomInputs, setRoomInputs] = useState([
    { dato1: "", dato2: "" }
  ]);

  
  const handleRoomChange = (value, index, name) => {
    const list = [...roomInputs ];
    list[index][name] = value;
    setRoomInputs(list);
  };

  const handleRemoveClickRoom = (index) => {
    const list = [...roomInputs];
    list.splice(index, 1);
    setRoomInputs(list);
  };

  const handleAddClickRoom = () => {
    setRoomInputs([...roomInputs, { dato1: "", dato2: "" }]);
  };

  
 
    return (
<div className="content-wrapper">
    
    <div className="content-header">
      <div className="container-fluid">
        
          <div className="col-sm-12">

          <div class="card">
              <div class="card-header">
              <h3 class="card-title">Datos</h3>
              </div>
            
              <div class="card-body">
                
                  <div class="row">  

                  <div class="col-sm-4">
                  <div class="input-group">
                  <input type="text" name="nombre"
                  placeholder='nombre' className="form-control" onChange={handleChange}/>
                  </div>
                  </div>


                  </div>

                  <div class="row">
                  <div class="col-sm-12">
                  
                  
        <br />
          <Grid item sm={12}>
            <TableContainer component={Paper} variant="outlined">
              <Table  aria-label="customized table">
                <TableHead>
                  <TableRow>
                    <TableCell>#</TableCell>
                    <TableCell align="left">dato1</TableCell>
                    <TableCell align="left">dato2</TableCell>
                  </TableRow>
                  
                </TableHead>
                <TableBody>
                  {roomInputs.map((x, i) => (
                    <StyledTableRow key={i}>
                      <TableCell component="th" scope="row">
                        {i + 1}
                      </TableCell>
                      <TableCell align="left">
                        <input 
                        type="text"
                        className="form-control"
                        name="dato1"
                        value={options.value}
                        //onChange={option => handleRoomChange(option, i, "dato1")}
                        onChange={event => handleRoomChange(event.target.value, i, "dato1")}
                        />
                      </TableCell>
                      <TableCell align="left">
                      <input 
                        type="number"
                        name="dato2"
                        className="form-control"
                        value={options.value}
                        //onChange={option => handleRoomChange(option, i, "dato2")}
                        onChange={event => handleRoomChange(event.target.value, i, "dato2")}
                        />
                      </TableCell>

            

                      <TableCell align="left">
                        {roomInputs.length !== 1 && (
                          <DeleteIcon
                            onClick={() => handleRemoveClickRoom(i)}
                            style={{
                              marginRight: "10px",
                              marginTop: "4px",
                              cursor: "pointer"
                            }}
                          />
                        )}
                        {roomInputs.length - 1 === i && (
                          <AddCircleOutlineIcon
                            onClick={handleAddClickRoom}
                            style={{ marginTop: "4px", cursor: "pointer" }}
                          />
                        )}
                      </TableCell>
                    </StyledTableRow>
                  ))}
                </TableBody>
               
                  
              </Table>
            </TableContainer>
          </Grid>
         
      
     
             </div>
                  </div>
                  <br />
                  <button className="btn btn-primary" onClick={()=>peticionPost()}> Registrar</button>
               
              </div>
             
            </div>     

      </div>

      </div>
      </div>
    
  </div>
    )
}


export default Pruebas

<?php

include '../../bd/global.php';

header('Access-Control-Allow-Origin: *');


if($_POST['METHOD']=='POST_prueba'){
    unset($_POST['METHOD']);
    $nombre=$_POST['nombre'];
    $dato1=$_POST['dato1'];
    $dato2=$_POST['dato2'];
    $query="insert into ingresos2(nombre,dato1,dato2) values ('$nombre','$dato1','$dato2')";
    $queryAutoIncrement="select MAX(id_ingreso) as id_ingreso from ingresos2";
    $resultado=metodoPost($query, $queryAutoIncrement);
    echo json_encode($resultado);
    header("HTTP/1.1 200 OK");
    exit();
}


header("HTTP/1.1 400 Bad Request");


?>

import React from 'react'

function Componente1() {

    global.url_login='https://www.deportes.mipagina.com/api/usuarios/';
    
    return (
        <div>        
        </div>
    )
}
export default Componente1

import React from 'react'
import Componente1 from './Componente1'

console.log("url" + global.url_login);

function Componente2() {
   
    return (
        <div>   
        
        </div>
    )
}
export default Componente2

import React, { useState } from "react";

//input dinamico

import Row from "./Row2";

let initialState = {
  first: null,
  arraySelect: [],
  arraySelect2: []
};

function test(props) {
  //input dinamico

  const [rows, setRows] = useState([]);
  const [initialeRow, setInitialRow] = useState({ nombre: "" });
  //SELECT2
  const [selectedNumbers, setSelectedNumbers] = useState([]);

  const handleOnChange = (index, value) => {
    const copy = rows.map((e, i) => {
      if (i === index) {
        e.nombre = value;
      }

      return e;
    });

    setRows([...copy]);
  };

  //division
  const [number, setNumber] = useState();

  //Mostrar 4
  const [modocuatro, setModoCuatro] = useState(null);

  //Mostrar 5
  const [modoboton, setModoBoton] = useState(null);

  //modo cuatro
  const handleClick_cuatro = (event) => {
    event.preventDefault();
    setModoCuatro(true);

    global.multi = global.nuevo * global.select1;

    console.log(global.multi + "resultado");
  };

  const handleInput_division = (event) => {
    const { name, value } = event.target;
    setNumber({ ...number, [name]: value });
  };

  const handleInput_division2 = (event) => {
    const { name, value } = event.target;

    setSelect(value);

    setNumber({ ...number, [name]: value });
    setInitialRow({ nombre: value * 1 + 1 });
  };

  const [arraySelect, setarraySelect] = useState(initialState.arraySelect);

  const [arraySelect2, setarraySelect2] = useState(initialState.arraySelect2);

  const [numberIni, setnumberIni] = useState(initialState.first);

  const [numberIni2, setnumberIni2] = useState(initialState.first);

  const getArray = (value) => {
    let arr = [];
    {
      let reco = Math.round(numberIni - parseInt(value));
      console.log(reco + "mi");

      if (parseInt(value) == numberIni) {
        return false;
      }
      Array(reco)
        .fill(1)
        .map((value2, key) => {
          arr.push(parseInt(value) + parseInt(key + 1));
        });
    }
    return arr;
  };

  const setSelect = (value) => {
    //debugger;
    let isArray = getArray(value);
    if (isArray) {
      setarraySelect([...arraySelect, isArray]);
      setModoBoton(true);
    }
    if (isArray) {
      setInitialRow({ nombre: value });
      setRows([...rows, { nombre: value }]);
    }
  };

  //segundo array
  const getArray2 = (value) => {
    const numValue2 = parseInt(value, 10);
    const arr2 = [];
    for (let i = 0; i < numValue2 - 1; i++) {
      arr2.push(numValue2 - i - 1);
    }
    if (arr2.length) {
      return arr2;
    }
  };

  //segundo select
  const setSelect_select2 = (value) => {
    let mi = global.division2020;
    let isArray2 = getArray2(value);
    if (isArray2) {
      setarraySelect2([...arraySelect2, isArray2]);

      setInitialRow({ nombre: initialeRow.nombre * 1 + 1 });

      setRows([...rows, initialeRow]);
    }
  };

  //SEGUNDO SELECT
  const handleChange = (index, value) => {
    const tmpSelectedNumbers = [...selectedNumbers];
    tmpSelectedNumbers[index] = value;
    setSelectedNumbers(tmpSelectedNumbers);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    setnumberIni(event.target.numberIni.value);
    setnumberIni2(event.target.numberIni2.value - 1);
  };

  const resetFormtodo = () => {
    setRows([]);
    setarraySelect([]);
    setarraySelect2([]);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div class="row">
          <div class="col-sm-3">
            <h6>INGRESA UN PRIMER VALOR "GRUPOS"</h6>

            <div class="input-group ">
              <select
                name="numberIni2"
                class="form-control"
                onChange={handleInput_division}
              >
                <option value="0" selected>
                  Seleccione
                </option>

                <option value="10"> 10 </option>

                <option value="20">20</option>
              </select>

              <br />
            </div>
          </div>

          <div class="col-sm-3">
            <h6>INGRESA UN SEGUNDO VALOR</h6>
            <div class="input-group ">
              <input
                type="number"
                name="numberIni"
                placeholder="0"
                class="form-control"
              />
              <br />
              <button type="submit" className="btn btn-primary">
                GENERAR
              </button>
            </div>
          </div>
        </div>
      </form>
      <br />
      <div>
        <hr />
      </div>
      <br /> <br />
      <div class="row">
        <div class="col-sm-12">
          {numberIni && (
            <div>
              <h6>Criterio Para Equipos Clasificados a la Siguiente Fase</h6>
              <label>
                <font size="2">
                  1° Clasificados Por Grupo <br />
                  Clasificarán a Siguiente Fases Los Primeros :&nbsp;{" "}
                </font>
              </label>
              <select onChange={handleInput_division2} name="numberIni3">
                <option value="seleccione">Seleccione</option>
                {Array(parseInt(numberIni))
                  .fill(1)
                  .map((value, key) => {
                    return <option value={key + 1}>{key + 1} Equipos</option>;
                  })}
              </select>

              <label>
                <font size="2">&nbsp;Equipos De Cada Grupo </font>{" "}
              </label>

              <label>
                <font size="2">
                  {" "}
                  &nbsp;{" "}
                  {modoboton ? (
                    <button
                      className="btn btn-primary"
                      onClick={handleClick_cuatro}
                    >
                      Generar select
                    </button>
                  ) : (
                    <></>
                  )}{" "}
                </font>{" "}
              </label>

              <hr />
              {modocuatro ? (
                <div class="col-sm-10" style={{ top: "-20px" }}>
                  {Array(parseInt(numberIni2))
                    .fill(1)
                    .map((value, key2) => {
                      return (
                        <div>
                          {arraySelect[key2] && (
                            <>
                              <label>
                                <font size="2">
                                  &nbsp; &nbsp;
                                  <label>
                                    <font size="2">
                                      {" "}
                                      &nbsp;{" "}
                                      <div class="row">
                                        <div class="col-sm-9">
                                          <h6>
                                            Segundos Clasificados Por Grupo
                                          </h6>
                                          <label>
                                            <font size="2">
                                              Clasificarán a Siguiente Fases Los
                                              de Mejor Promedio :
                                              {rows.length === 1 && (
                                                <select
                                                  onChange={(e) =>
                                                    handleChange(
                                                      0,
                                                      e.target.value
                                                    )
                                                  }
                                                  name=""
                                                  id=""
                                                  disabled={false}
                                                >
                                                  <option value="seleccione">
                                                    Seleccione
                                                  </option>
                                                  {Array(parseInt(numberIni2))
                                                    .fill(1)
                                                    .map((value, key) => {
                                                      return (
                                                        <option
                                                          value={
                                                            numberIni2 - key
                                                          }
                                                        >
                                                          {numberIni2 - key}{" "}
                                                          Equipos
                                                        </option>
                                                      );
                                                    })}
                                                </select>
                                              )}
                                              {rows.length !== 1 && (
                                                <select
                                                  onChange={(e) =>
                                                    handleChange(
                                                      0,
                                                      e.target.value
                                                    )
                                                  }
                                                  name=""
                                                  id=""
                                                  disabled={true}
                                                  value={selectedNumbers[key2]}
                                                >
                                                  <option value="seleccione">
                                                    Seleccione
                                                  </option>
                                                  {Array(parseInt(numberIni2))
                                                    .fill(1)
                                                    .map((value, key) => {
                                                      return (
                                                        <option
                                                          value={
                                                            numberIni2 - key
                                                          }
                                                        >
                                                          {numberIni2 - key}{" "}
                                                          Equipos
                                                        </option>
                                                      );
                                                    })}
                                                </select>
                                              )}{" "}
                                              {console.log(arraySelect)}{" "}
                                              Ubicados en la
                                              {rows.length === 1 && (
                                                <div
                                                  className="col-sm-2"
                                                  style={{
                                                    top: "-27px",
                                                    right: "-135%"
                                                  }}
                                                >
                                                  <button
                                                    type="submit"
                                                    className="btn btn-primary"
                                                    onClick={() => {
                                                      setSelect_select2(
                                                        selectedNumbers[0]
                                                      );
                                                    }}
                                                  >
                                                    crear
                                                  </button>
                                                </div>
                                              )}
                                            </font>{" "}
                                          </label>

                                          {Array(parseInt(numberIni2))
                                            .fill(1)
                                            .map((value, key2) => {
                                              return (
                                                <div>
                                                  {arraySelect2[key2] && (
                                                    <>
                                                      <h6>
                                                        Segundos Clasificados
                                                        Por Grupo
                                                      </h6>
                                                      <label>
                                                        <font size="2">
                                                          Clasificarán a
                                                          Siguiente Fases Los de
                                                          Mejor Promedio :
                                                          {key2 ===
                                                            rows.length - 2 && (
                                                            <select
                                                              onChange={(e) =>
                                                                handleChange(
                                                                  key2 + 1,
                                                                  e.target.value
                                                                )
                                                              }
                                                              name=""
                                                              id=""
                                                              disabled={false}
                                                            >
                                                              <option value="seleccione">
                                                                Seleccione
                                                              </option>
                                                              {arraySelect2[
                                                                key2
                                                              ].map(
                                                                (
                                                                  value,
                                                                  key3
                                                                ) => {
                                                                  return (
                                                                    <option
                                                                      value={
                                                                        arraySelect2[
                                                                          key2
                                                                        ][key3]
                                                                      }
                                                                    >
                                                                      {
                                                                        arraySelect2[
                                                                          key2
                                                                        ][key3]
                                                                      }{" "}
                                                                      Equipos
                                                                    </option>
                                                                  );
                                                                }
                                                              )}
                                                            </select>
                                                          )}
                                                          {key2 !==
                                                            rows.length - 2 && (
                                                            <select
                                                              onChange={(e) =>
                                                                handleChange(
                                                                  key2 + 1,
                                                                  e.target.value
                                                                )
                                                              }
                                                              name=""
                                                              id=""
                                                              disabled={true}
                                                              value={
                                                                selectedNumbers[
                                                                  key2 + 1
                                                                ]
                                                              }
                                                            >
                                                              <option value="seleccione">
                                                                Seleccione
                                                              </option>
                                                              {arraySelect2[
                                                                key2
                                                              ].map(
                                                                (
                                                                  value,
                                                                  key3
                                                                ) => {
                                                                  return (
                                                                    <option
                                                                      value={
                                                                        arraySelect2[
                                                                          key2
                                                                        ][key3]
                                                                      }
                                                                    >
                                                                      {
                                                                        arraySelect2[
                                                                          key2
                                                                        ][key3]
                                                                      }{" "}
                                                                      Equipos
                                                                    </option>
                                                                  );
                                                                }
                                                              )}
                                                            </select>
                                                          )}{" "}
                                                          Ubicados en la
                                                          {key2 ===
                                                            rows.length - 2 && (
                                                            <div
                                                              className="col-sm-2"
                                                              style={{
                                                                top: "-27px",
                                                                right: "-135%"
                                                              }}
                                                            >
                                                              <button
                                                                type="submit"
                                                                className="btn btn-primary"
                                                                onClick={() => {
                                                                  setSelect_select2(
                                                                    selectedNumbers[
                                                                      key2 + 1
                                                                    ]
                                                                  );
                                                                }}
                                                              >
                                                                crear
                                                              </button>
                                                            </div>
                                                          )}
                                                        </font>{" "}
                                                      </label>
                                                    </>
                                                  )}
                                                </div>
                                              );
                                            })}
                                        </div>

                                        <div
                                          className="col-sm-2"
                                          style={{ top: "-40px" }}
                                        >
                                          {rows.map((e, index) => (
                                            <Row
                                              nombre={e.nombre}
                                              index={index}
                                              onChange={(index, value) =>
                                                handleOnChange(index, value)
                                              }
                                              key={index}
                                            />
                                          ))}
                                        </div>
                                      </div>{" "}
                                    </font>{" "}
                                  </label>
                                </font>{" "}
                              </label>
                            </>
                          )}
                        </div>
                      );
                    })}
                </div>
              ) : (
                <></>
              )}

              {numberIni2 && (
                <input
                  onClick={() => resetFormtodo()}
                  type="button"
                  value="Reiniciar"
                />
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default test;

onst Row = (props) => {
  const { onChange, onRemove, nombre, index } = props;
  console.log(props);
  return (
    <div>
      <h6> </h6>
      <br />
      <br />
      <br />

      <input
        disabled
        value={nombre * 1 + 1 + " Posición"}
        onChange={(e) => onChange(index, e.target.value)}
        placeholder="Decrementar"
      />
    </div>
  );
};
export default Row;

import React, { useState } from "react";

//input dinamico

import Row from "./Row2";

let initialState = {
  first: null,
  arraySelect: [],
  arraySelect2: []
};

function test(props) {
  //input dinamico

  const [rows, setRows] = useState([]);
  const [initialeRow, setInitialRow] = useState({ nombre: "" });
  //SELECT2
  const [selectedNumbers, setSelectedNumbers] = useState([]);

  const handleOnChange = (index, value) => {
    const copy = rows.map((e, i) => {
      if (i === index) {
        e.nombre = value;
      }

      return e;
    });

    setRows([...copy]);
  };

  //division
  const [number, setNumber] = useState();

  //Mostrar 4
  const [modocuatro, setModoCuatro] = useState(null);

  //Mostrar 5
  const [modoboton, setModoBoton] = useState(null);

  //modo cuatro
  const handleClick_cuatro = (event) => {
    event.preventDefault();
    setModoCuatro(true);

    global.multi = global.nuevo * global.select1;

    console.log(global.multi + "resultado");
  };

  const handleInput_division = (event) => {
    const { name, value } = event.target;
    setNumber({ ...number, [name]: value });
  };

  const handleInput_division2 = (event) => {
    const { name, value } = event.target;

    setSelect(value);

    setNumber({ ...number, [name]: value });
    setInitialRow({ nombre: value * 1 + 1 });
  };

  const [arraySelect, setarraySelect] = useState(initialState.arraySelect);

  const [arraySelect2, setarraySelect2] = useState(initialState.arraySelect2);

  const [numberIni, setnumberIni] = useState(initialState.first);

  const [numberIni2, setnumberIni2] = useState(initialState.first);

  const getArray = (value) => {
    let arr = [];
    {
      let reco = Math.round(numberIni - parseInt(value));
      console.log(reco + "mi");

      if (parseInt(value) == numberIni) {
        return false;
      }
      Array(reco)
        .fill(1)
        .map((value2, key) => {
          arr.push(parseInt(value) + parseInt(key + 1));
        });
    }
    return arr;
  };

  const setSelect = (value) => {
    //debugger;
    let isArray = getArray(value);
    if (isArray) {
      setarraySelect([...arraySelect, isArray]);
      setModoBoton(true);
    }
    if (isArray) {
      setInitialRow({ nombre: value });
      setRows([...rows, { nombre: value }]);
    }
  };

  //segundo array
  const getArray2 = (value) => {
    const numValue2 = parseInt(value, 10);
    const arr2 = [];
    for (let i = 0; i < numValue2 - 1; i++) {
      arr2.push(numValue2 - i - 1);
    }
    if (arr2.length) {
      return arr2;
    }
  };

  //segundo select
  const setSelect_select2 = (value) => {
    let mi = global.division2020;
    let isArray2 = getArray2(value);
    if (isArray2) {
      setarraySelect2([...arraySelect2, isArray2]);

      setInitialRow({ nombre: initialeRow.nombre * 1 + 1 });

      setRows([...rows, initialeRow]);
    }
  };

  //SEGUNDO SELECT
  const handleChange = (index, value) => {
    const tmpSelectedNumbers = [...selectedNumbers];
    tmpSelectedNumbers[index] = value;
    setSelectedNumbers(tmpSelectedNumbers);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    setnumberIni(event.target.numberIni.value);
    setnumberIni2(event.target.numberIni2.value - 1);
  };

  const resetFormtodo = () => {
    setnumberIni(null);
    setnumberIni2(null);

    setRows([]);
    setarraySelect([]);
    setarraySelect2([]);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div class="row">
          <div class="col-sm-3">
            <h6>INGRESA UN PRIMER VALOR "GRUPOS"</h6>

            <div class="input-group ">
              <select
                name="numberIni2"
                class="form-control"
                onChange={handleInput_division}
              >
                <option value="0" selected>
                  Seleccione
                </option>

                <option value="10"> 10 </option>

                <option value="20">20</option>
              </select>

              <br />
            </div>
          </div>

          <div class="col-sm-3">
            <h6>INGRESA UN SEGUNDO VALOR</h6>
            <div class="input-group ">
              <input
                type="number"
                name="numberIni"
                placeholder="0"
                class="form-control"
              />
              <br />
              <button type="submit" className="btn btn-primary">
                GENERAR
              </button>
            </div>
          </div>
        </div>
      </form>
      <br />
      <div>
        <hr />
      </div>
      <br /> <br />
      <div class="row">
        <div class="col-sm-12">
          {numberIni && (
            <div>
              <h6>Criterio Para Equipos Clasificados a la Siguiente Fase</h6>
              <label>
                <font size="2">
                  1° Clasificados Por Grupo <br />
                  Clasificarán a Siguiente Fases Los Primeros :&nbsp;{" "}
                </font>
              </label>
              <select onChange={handleInput_division2} name="numberIni3">
                <option value="seleccione">Seleccione</option>
                {Array(parseInt(numberIni))
                  .fill(1)
                  .map((value, key) => {
                    return <option value={key + 1}>{key + 1} Equipos</option>;
                  })}
              </select>

              <label>
                <font size="2">&nbsp;Equipos De Cada Grupo </font>{" "}
              </label>

              <label>
                <font size="2">
                  {" "}
                  &nbsp;{" "}
                  {modoboton ? (
                    <button
                      className="btn btn-primary"
                      onClick={handleClick_cuatro}
                    >
                      Generar select
                    </button>
                  ) : (
                    <></>
                  )}{" "}
                </font>{" "}
              </label>

              <hr />
              {modocuatro ? (
                <div class="col-sm-10" style={{ top: "-20px" }}>
                  {Array(parseInt(numberIni2))
                    .fill(1)
                    .map((value, key2) => {
                      return (
                        <div>
                          {arraySelect[key2] && (
                            <>
                              <label>
                                <font size="2">
                                  &nbsp; &nbsp;
                                  <label>
                                    <font size="2">
                                      {" "}
                                      &nbsp;{" "}
                                      <div class="row">
                                        <div class="col-sm-9">
                                          <h6>
                                            Segundos Clasificados Por Grupo
                                          </h6>
                                          <label>
                                            <font size="2">
                                              Clasificarán a Siguiente Fases Los
                                              de Mejor Promedio :
                                              <select
                                                onChange={(e) =>
                                                  handleChange(
                                                    0,
                                                    e.target.value
                                                  )
                                                }
                                                name=""
                                                id=""
                                              >
                                                <option value="seleccione">
                                                  Seleccione
                                                </option>
                                                {Array(parseInt(numberIni2))
                                                  .fill(1)
                                                  .map((value, key) => {
                                                    return (
                                                      <option
                                                        value={numberIni2 - key}
                                                      >
                                                        {numberIni2 - key}{" "}
                                                        Equipos
                                                      </option>
                                                    );
                                                  })}
                                              </select>{" "}
                                              {console.log(arraySelect)}{" "}
                                              Ubicados en la
                                              {rows.length === 1 && (
                                                <div
                                                  className="col-sm-2"
                                                  style={{
                                                    top: "-27px",
                                                    right: "-135%"
                                                  }}
                                                >
                                                  <button
                                                    type="submit"
                                                    className="btn btn-primary"
                                                    onClick={() => {
                                                      setSelect_select2(
                                                        selectedNumbers[0]
                                                      );
                                                    }}
                                                  >
                                                    crear
                                                  </button>
                                                </div>
                                              )}
                                            </font>{" "}
                                          </label>

                                          {Array(parseInt(numberIni2))
                                            .fill(1)
                                            .map((value, key2) => {
                                              return (
                                                <div>
                                                  {arraySelect2[key2] && (
                                                    <>
                                                      <h6>
                                                        Segundos Clasificados
                                                        Por Grupo
                                                      </h6>
                                                      <label>
                                                        <font size="2">
                                                          Clasificarán a
                                                          Siguiente Fases Los de
                                                          Mejor Promedio :
                                                          <select
                                                            onChange={(e) =>
                                                              handleChange(
                                                                key2 + 1,
                                                                e.target.value
                                                              )
                                                            }
                                                            name=""
                                                            id=""
                                                          >
                                                            <option value="seleccione">
                                                              Seleccione
                                                            </option>
                                                            {arraySelect2[
                                                              key2
                                                            ].map(
                                                              (value, key3) => {
                                                                return (
                                                                  <option
                                                                    value={
                                                                      arraySelect2[
                                                                        key2
                                                                      ][key3]
                                                                    }
                                                                  >
                                                                    {
                                                                      arraySelect2[
                                                                        key2
                                                                      ][key3]
                                                                    }{" "}
                                                                    Equipos
                                                                  </option>
                                                                );
                                                              }
                                                            )}
                                                          </select>{" "}
                                                          Ubicados en la
                                                          {key2 ===
                                                            rows.length - 2 && (
                                                            <div
                                                              className="col-sm-2"
                                                              style={{
                                                                top: "-27px",
                                                                right: "-135%"
                                                              }}
                                                            >
                                                              <button
                                                                type="submit"
                                                                className="btn btn-primary"
                                                                onClick={() => {
                                                                  setSelect_select2(
                                                                    selectedNumbers[
                                                                      key2 + 1
                                                                    ]
                                                                  );
                                                                }}
                                                              >
                                                                crear
                                                              </button>
                                                            </div>
                                                          )}
                                                        </font>{" "}
                                                      </label>
                                                    </>
                                                  )}
                                                </div>
                                              );
                                            })}
                                        </div>

                                        <div
                                          className="col-sm-2"
                                          style={{ top: "-40px" }}
                                        >
                                          {rows.map((e, index) => (
                                            <Row
                                              nombre={e.nombre}
                                              index={index}
                                              onChange={(index, value) =>
                                                handleOnChange(index, value)
                                              }
                                              key={index}
                                            />
                                          ))}
                                        </div>
                                      </div>{" "}
                                    </font>{" "}
                                  </label>
                                </font>{" "}
                              </label>
                            </>
                          )}
                        </div>
                      );
                    })}
                </div>
              ) : (
                <></>
              )}

              {numberIni2 && (
                <input
                  onClick={() => resetFormtodo()}
                  type="button"
                  value="Reiniciar"
                />
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default test;

const Row = (props) => {
  const { onChange, onRemove, nombre, index } = props;
  console.log(props);
  return (
    <div>
      <h6> </h6>
      <br/>
      <br/>
      <br/>
      
      <input
      disabled
        value={nombre  * 1 + 1 +  " Posición"}
        onChange={(e) => onChange(index, e.target.value)} 
        placeholder="Decrementar"
      />


      
    </div>
  );
};
export default Row;

import React, { useState} from "react";


//input dinamico

import Row from "./Row2";

let initialState = {
  first: null,
  arraySelect: [],
  arraySelect2: []
};

function test(props) {

  //input dinamico

  const [rows, setRows] = useState([]);
  const [initialeRow, setInitialRow] = useState({ nombre: "" });
  //SELECT2
  const [selectedNumbers, setSelectedNumbers] = useState([]);
 
  const handleOnChange = (index, value) => {
    const copy = rows.map((e, i) => {
      if (i === index) {
        e.nombre = value;
      }
     
      return e;
     
    });
   
    setRows([...copy]);
  };
  


  //division
  const [number, setNumber] = useState();

  //Mostrar 4
  const [modocuatro, setModoCuatro] = useState(null);

  //Mostrar 5
  const [modoboton, setModoBoton] = useState(null);

 

  //modo cuatro
  const handleClick_cuatro = (event) => {
    event.preventDefault();
    setModoCuatro(true);
    
 global.multi = global.nuevo * global.select1;
  
  console.log(global.multi + "resultado");
  };

  
  const handleInput_division = (event) => {
    const { name, value } = event.target;
    setNumber({ ...number, [name]: value });
  };



  const handleInput_division2 = (event) => {

    const { name, value } = event.target;
    
    setSelect(value)
    
    setNumber({ ...number, [name]: value });
    setInitialRow({ nombre: value * 1 + 1});
    
   
  };

  const [arraySelect, setarraySelect] = useState(initialState.arraySelect);
  
  const [arraySelect2, setarraySelect2] = useState(initialState.arraySelect2);

  const [numberIni, setnumberIni] = useState(initialState.first);

  const [numberIni2, setnumberIni2] = useState(initialState.first);

  const getArray = (value) => {
    let arr = [];
    {
      let reco = Math.round(numberIni - parseInt(value));
      console.log(reco + "mi");

      if (parseInt(value) == numberIni) {
        return false;
      }
      Array(reco)
        .fill(1)
        .map((value2, key) => {
          arr.push(parseInt(value) + parseInt(key + 1));
        });
    }
    return arr;
  };




  const setSelect = (value) => {
    //debugger;
      let isArray = getArray(value);
      if (isArray) {
        setarraySelect([...arraySelect, isArray]);
        setModoBoton(true);
       
      }
      if (isArray) {
        setInitialRow({ nombre: value});
        setRows([...rows, { nombre: value}]);
      }
     
  };

//segundo array
  const getArray2 = (value) => {
    const numValue2 = parseInt(value, 10);
    const arr2 = [];
    for (let i = 0; i < numValue2 - 1; i++) {
      arr2.push(numValue2 - i - 1);
    }
    if (arr2.length) {
      return arr2;
    }
  };

  //segundo select
  const setSelect_select2 = (value) => {
    let mi=global.division2020;
    let isArray2 = getArray2(value);
    if (isArray2) {
       
      setarraySelect2([...arraySelect2, isArray2]);
    
     setInitialRow({ nombre: initialeRow.nombre * 1 + 1 }) ;
     
      setRows([...rows, initialeRow]);
     

    }
    
  };
   

  //SEGUNDO SELECT
  const handleChange = (index, value) => {
    const tmpSelectedNumbers = [...selectedNumbers];
    tmpSelectedNumbers[index] = value;
    setSelectedNumbers(tmpSelectedNumbers);
    
  };


  const handleSubmit = (event) => {
    event.preventDefault();

    setnumberIni(event.target.numberIni.value);
    setnumberIni2(event.target.numberIni2.value - 1);
    
  };

 

  const resetFormtodo = () => {
      setnumberIni(null);
      setnumberIni2(null);
  
      setRows([]);
      setarraySelect([]);
      setarraySelect2([]);

    };




  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div class="row">

            <div class="col-sm-3">
              <h6>INGRESA UN PRIMER VALOR "GRUPOS"</h6>

              <div class="input-group ">
                <select
                  name="numberIni2"
                  class="form-control"
                  onChange={ handleInput_division }
                >
                  <option value="0" selected>Seleccione</option>

                  <option value="10"> 10 </option>

                  <option value="20">20</option>
               
                </select>

                <br />
                
              </div>
            </div>
         

       
            <div class="col-sm-3">
              <h6>INGRESA UN SEGUNDO VALOR</h6>
              <div class="input-group ">
                <input
                  type="number"
                  name="numberIni"
                  placeholder="0"
                  class="form-control"
                />
                <br />
                <button type="submit" className="btn btn-primary">
                 GENERAR
                </button>
              </div>
            </div>
      

          
        </div>
      </form>
      <br />
   
      <div>
      <hr/>
      </div>
      <br /> <br />
      <div class="row">
        <div class="col-sm-12">
          {numberIni && (
            <div>
              <h6>Criterio Para Equipos Clasificados a la Siguiente Fase</h6>
              <label>
                <font size="2">
                  1° Clasificados Por Grupo <br />
                  Clasificarán a Siguiente Fases Los Primeros :&nbsp;{" "}
                </font>
              </label>
              <select
             
              onChange={handleInput_division2}
              name="numberIni3"
               
              >
                <option value="seleccione">Seleccione</option>
                {Array(parseInt(numberIni))
                  .fill(1)
                  .map((value, key) => {
                    return <option value={key + 1}>{key + 1} Equipos</option>;
                  })}
              </select>
              
              <label>
                <font size="2">&nbsp;Equipos De Cada Grupo </font>{" "}
              </label>
              

                  <label>
                    <font size="2">
                      {" "}
                      &nbsp;{" "}
                      {modoboton ? (
                        <button
                          className="btn btn-primary"
                          onClick={handleClick_cuatro}
                        >
                          Generar select
                        </button>
                      
                         ) : (
                            <></>
                          )}

                      {" "}
                    </font>{" "}
                  </label>
              
               
              <hr />
                {modocuatro ? (
                  <div class="col-sm-10" style={{ top: "-20px" }}>
                  
                                   
                    {Array(parseInt(numberIni2))
                      .fill(1)
                      .map((value, key2) => {
                        return (
                          <div>
                            {arraySelect[key2] && (
                              <>
                                <label>
                                  <font size="2">
                                    &nbsp; &nbsp;
                                                                         <label>
                                        <font size="2">
                                          {" "}
                                          &nbsp;{" "}
                                           
                                          <div class="row">

                                          <div class="col-sm-9">
                                          <h6>Segundos Clasificados Por Grupo</h6>
                  <label><font size="2">Clasificarán a Siguiente Fases Los de Mejor Promedio : 
                                          <select
            onChange={(e) => handleChange(0, e.target.value)
             }
            name=""
            id=""
            
          >
            <option value="seleccione">Seleccione</option>
            {Array(parseInt(numberIni2))
              .fill(1)
              .map((value, key) => {
                return (
                  <option value={numberIni2 - key}>{numberIni2 - key} Equipos</option>
                );
              })}
          </select>  {console.log(arraySelect)} Ubicados en la
          {arraySelect.length === 0 && (
          <div className="col-sm-2" style={{top:"-27px", right:"-135%"}}>
          <button
            type="submit"
            className="btn btn-primary"
            onClick={() => {
                setSelect_select2(selectedNumbers[0]);
            }}
          >
           crear
          </button>
          </div>
           )}

          </font> </label>

          {Array(parseInt(numberIni2))
            .fill(1)
            .map((value, key2) => {
              return (
                <div>
                  {arraySelect2[key2] && (
                    <>
                    <h6>Segundos Clasificados Por Grupo</h6>
                  <label><font size="2">Clasificarán a Siguiente Fases Los de Mejor Promedio : 
                      <select
                        onChange={(e) => handleChange(key2 + 1, e.target.value)}
                        name=""
                        id=""
                       
                      >
                        <option value="seleccione">Seleccione</option>
                        {arraySelect2[key2].map((value, key3) => {
                          return (
                            <option value={arraySelect2[key2][key3]}>
                              {arraySelect2[key2][key3]} Equipos
                            </option>
                          );
                        })}
                      </select> Ubicados en la
                      {key2 === arraySelect.length - 1 && (
                      <div className="col-sm-2" style={{top:"-27px", right:"-135%"}}>
                      <button
                        type="submit"
                        className="btn btn-primary"
                        onClick={() => {
                            setSelect_select2(selectedNumbers[key2 + 1]);
                        }}
                      >
                         crear
                      </button>
                      </div>
                      )}
                      </font> </label>
                    </>
                  )}
                </div>
              );
            })}

                                          </div>

                                          

                                          <div className="col-sm-2" style={{top:"-40px"}}>


                                          {rows.map((e, index) => (
                                              
                                             
                                              <Row
                                                nombre={e.nombre}
                                                index={index}
                                                onChange={(index, value) =>
                                                  handleOnChange(index, value)
                                                }
                                                key={index}
                                              />
                                              
                                            ))}

                                         </div>

                                         </div>
          
                                          {" "}
                                        </font>{" "}
                                      </label>
                                  

                                  </font>{" "}
                                </label>
                               
                              </>
                            )}
                          </div>
                        );
                      })}
                  </div>
                ) : (
                  <></>
                )}

{numberIni2 && (
        <input onClick={() => resetFormtodo()} type="button" value="Reiniciar" />
      )}
             
            </div>
          )}
        </div>
      </div>

     
      
    
      
    </div>
  );
}

export default test;

const Row = (props) => {
  const { onChange, onRemove, nombre, index } = props;
  console.log(props);
  return (
    <div>
      <h6> </h6>
      <br/>
      <br/>
      <br/>
      
      <input
      disabled
        value={nombre  * 1 + 1 +  " Posición"}
        onChange={(e) => onChange(index, e.target.value)} 
        placeholder="Decrementar"
      />


      
    </div>
  );
};
export default Row;

import React,{useState} from 'react'

function Pruebas() {
  const [select, setSelect] = useState();

  const elselect =  () => {
   
    
  }
  return (
    <div>
      <form>
        
        <select  onChange={ elselect }>
          <option value="uno">uno</option>
          <option value="uno">dos</option>
        </select>
      </form>
      
    </div>
  )
}

export default Pruebas

import React, { useState } from "react";
let initialState = {
  first: null,
  arraySelect: []
};
const Test = () => {
  const [arraySelect, setarraySelect] = useState(initialState.arraySelect);
  const [numberIni, setnumberIni] = useState(initialState.first);
  const [selectedNumbers, setSelectedNumbers] = useState([]);

  const getArray = (value) => {
    const numValue = parseInt(value, 10);
    const arr = [];
    for (let i = 0; i < numValue - 1; i++) {
      arr.push(numValue - i - 1);
    }
    if (arr.length) {
      return arr;
    }
  };
  const setSelect = (value) => {
    let isArray = getArray(value);
    if (isArray) {
      setarraySelect([...arraySelect, isArray]);
    }
  };

  const handleChange = (index, value) => {
    const tmpSelectedNumbers = [...selectedNumbers];
    tmpSelectedNumbers[index] = value;
    setSelectedNumbers(tmpSelectedNumbers);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setnumberIni(event.target.numberIni.value - 1);
  };

  const resetForm = () => {
    setnumberIni(null);
    setarraySelect([]);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input name="numberIni" type="number" />

        <input type="submit" value="Generar select" />
      </form>
      {numberIni && (
        <div>
          <select
            onChange={(e) => handleChange(0, e.target.value)}
            name=""
            id=""
          >
            <option value="seleccione">Seleccione</option>
            {Array(parseInt(numberIni))
              .fill(1)
              .map((value, key) => {
                return (
                  <option value={numberIni - key}>{numberIni - key}</option>
                );
              })}
          </select>
          <button
            type="submit"
            className="btn btn-success"
            onClick={() => {
              setSelect(selectedNumbers[0]);
            }}
          >
            crear
          </button>
          {Array(parseInt(numberIni))
            .fill(1)
            .map((value, key2) => {
              return (
                <div>
                  {arraySelect[key2] && (
                    <>
                      <select
                        onChange={(e) => handleChange(key2 + 1, e.target.value)}
                        name=""
                        id=""
                      >
                        <option value="seleccione">Seleccione</option>
                        {arraySelect[key2].map((value, key3) => {
                          return (
                            <option value={arraySelect[key2][key3]}>
                              {arraySelect[key2][key3]}
                            </option>
                          );
                        })}
                      </select>
                      <button
                        type="submit"
                        className="btn btn-success"
                        onClick={() => {
                          setSelect(selectedNumbers[key2 + 1]);
                        }}
                      >
                        crear
                      </button>
                    </>
                  )}
                </div>
              );
            })}
        </div>
      )}

      {numberIni && (
        <input onClick={() => resetForm()} type="button" value="Reiniciar" />
      )}
    </div>
  );
};

export default Test;

// THIS IS THE IMAGE I NEED TO LOOK BIG WHEN I CLICK
    return InkWell(
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(
      builder: (BuildContext context) => ImageScreen(
        url: '${_productosModel[index].image}' + '?alt=media',
      ),
    ),
      ),
      child: Expanded(
        child: CachedNetworkImage(
          imageUrl: '${_productosModel[index].image}' + '?alt=media',
          fit: BoxFit.cover,
          placeholder: (_, __) {
            return Center(
              child: CupertinoActivityIndicator(
                radius: 15,
              ),
            );
//adicionar nuevo codigo
          },
        ),
      ),
    ),

Text(
                                  '${_productosModel[index].name}',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(fontSize: 20.0),
                                ),
                                SizedBox(
                                  height: 15,
                                ),
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: <Widget>[
                                    SizedBox(
                                      height: 25,
                                    ),
                                    Text(
                                      '${_productosModel[index].price.toString()}COP',
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold,
                                          fontSize: 20.0,
                                          color: Colors.black),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(
                                        right: 8.0,
                                        bottom: 8.0,
                                      ),
                                      child: Align(
                                        alignment: Alignment.bottomRight,
                                        child: GestureDetector(
                                          child: (!_listaCarro
                                                  .contains(item))
                                              ? Icon(
                                                  Icons.shopping_cart,
                                                  color: Colors.yellow[800],
                                                  size: 38,
                                                )
                                              : Icon(
                                                  Icons.shopping_cart,
                                                  color: Colors.red,
                                                  size: 38,
                                                ),
                                          onTap: () {
                                            setState(() {
                                              if (!_listaCarro
                                                  .contains(item))
                                                _listaCarro.add(item);
                                              else
                                                _listaCarro.remove(item);
                                            });
                                          },
                                        ),
                                      ),
                                    ),
                                  ],
                                )

<form  action="sendbymail2.php" method="post" accept-charset="ISO-8859-1">
                            <div class="row">
                                <div class="col-md-6 col-sm-12">
                                    <div class="contact-form-textfield pb-4">
                                        <input type="text" placeholder="Nombre" class="form-control" required=""  name="nombre">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12">
                                    <div class="contact-form-textfield pb-4">
                                        <input type="email" name="email" placeholder="Email"  class="form-control" required="">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12">
                                    <div class="contact-form-textfield pb-4">
                                        <input type="tel"  name="phone" placeholder="Celular" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12">
                                    <div class="contact-form-textfield pb-4">
                                        <input type="text" name="direccion" placeholder="Dirección" class="form-control" >
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="contact-form-textfield pb-4">
                                        <textarea placeholder="Mensaje - agregar placa si eres conductor" class="form-control message" name="message"></textarea>
                                    </div>
                                </div>
                                <div class="col-lg-12 pt-xs-25px text-center">
                                     <input id="submit" type="submit" class="btn btn-success"  name="submit" value="Enviar mensaje" /> 
                                   
                                </div>
                            </div>
                        </form>

<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$direccion = $_POST['direccion'];
$message= $_POST['message'];
$para = '[email protected]';
$titulo = 'Hola- Contactenos ';
$header = 'From: ' . $email;
$headers .= "Content-Type: text/html; charset=\"utf-8\"";
$msjCorreo = "Nombre: $nombre\n E-Mail: $email\n Celular: $phone\n Direccion: $direccion\n Mensaje: $message\n";
  
if ($_POST['submit']) {
if (mail($para, $titulo, $msjCorreo, $header)) {
echo "<script language='javascript'>
window.location.href = 'https://www.mipagina.com';
</script>";
} else {
echo 'Falló el envio';
}
}
?>

import { useState } from 'react'


export default function Pruebas() {

  const [number, setNumber] = useState({input: 0, two: 0})
  const [division, setDivision] = useState()

  const [input, setInput] = useState()
    const [values, setValues] = useState([])

    const handleClick = event => {
        event.preventDefault()
        setValues([+input, ...values])
    }


  const useEffect1= ()=>{
    const { input, two} = number
    setDivision(Number(input) / Number(two))
  }

  const handleInput = (event) => {
    const { name, value } = event.target
    setNumber({...number, [name]: value})
  }

  return (
    <div className="App">
      <input placeholder='Ingrese divisor' value={input} onChange={event => setInput(event.target.value)} />
      <button onClick={handleClick}>Agregar divisor</button>

      
      <br /><br />

      <select name='two' class='form-control'>
                <option value='no' selected>
                    Select
                </option>
                {values.map((item, index) => (
                    <option key={index} value={item}>
                        {item - 1}
                    </option>
                ))}
            </select>
      
      <br />
      
      <button onClick={useEffect1}>dividir</button>
      <input value={division}  placeholder="Resultado división" readOnly/>

     
    </div>
  );
}