Nuevas respuestas con la etiqueta reactjs
0
votos
Por qué razón los componentes y contenedores no se apilan?
En App.css, en la clase .App, debes añadir flex-direction: column; para que se apilen los elementos por si solos. A partir de ahí tu modificas tamaños y demás.
- 603
0
votos
¿Cómo hacer que un input tenga el focus al abrir un modal en react?
Este es un ejemplo de cómo focusear un elemento al montarse el componente. Lo referencias con useRef, y con un useEffect le aplicas el focus una vez que se monta el componente
import { useRef, ...
- 2,522
0
votos
¿Cómo hacer que un input tenga el focus al abrir un modal en react?
Tenia el mismo problema y en mi caso se ha solucionado de la siguiente manera (hay que decir que lo he probado en typeScript, pero te lo he traducido a React).
Html:
<CModal id="myModal&...
- 21
0
votos
Ahorcado en React, problema al renderizar cuando una palabra contiene letras repetidas
Hay varios puntos que destacar:
Estas usando el useState para manejar el estado de tu secret, pero estoy observando que en tu useEffect lo estas tratando como string a tu secret y luego en tu método ...
- 164
0
votos
No renderiza react router dom y aparece error 404
Das pocos datos, pero podría ser que te falte parte de la ruta, en plan..
<BrowserRouter>
<Routes>
<Route index path="/" element={<Metod />} />
...
0
votos
No puedo Instalar React-router-dom
Prueba a hacerlo de esta forma:
npm install react-router-dom@6
0
votos
Error en APP.js con la creacción de una carpeta de componentes
Suponiendo que has exportado el componente Header 'export default Header;'.
A la hora de importar tu componente debes hacerlo sin las llaves.
import Header from './components/Header/Header';
Creo que ...
0
votos
Por que la regla de request.auth != null no funciona en Firestore V9?
El if que colocaste no devuelve nada, es por eso que no funciona. Para este caso puedes utilizar el operador OR (||).
allow read: request.auth || false
Básicamente lo que hace ahí es, si el request....
- 164
0
votos
¿Usar modo de validación distinto en un campo específico con react-hook-form?
Según la documentación, mode indica la estrategia de validación del formulario, es decir, cuándo se van a ejecutar las validaciones para los inputs registrados.
Si lo que querés hacer es que un input ...
0
votos
Uncaught SyntaxError: Unexpected token '<' (at bundle.js:1:1) // REACT JS
Estaba haciendo el npm start en una terminal diferente donde la hice la primera vez, y por eso me dio el error. Una vez aplique el npm start en la misma terminal corrio. Saludos!
-1
votos
Como pasar props desde React a Angular con single-spa
Si lo que quieres es lograr la comunicación de dos aplicaciones independientes, puedes construir tu backend con socket (para trabajar en tiempo real), cuando el usuario haga el login en tu app en ...
- 164
0
votos
¿ Como mostrar un modal condicionado para verlo solo cuando se cumpla x condicion ? ReactJs
{additionals.lenght ? (
{additionals?.map((additional) => {
return (
<ModalAdditional
additional={additional}
...
3
votos
Aceptado
Cuando hago asincrona una funcion recibo el error: Objects are not valid as a React child (found: [object Promise])
Problema
El problema es que React espera que el componente devuelva un elemento o un array de elementos, y no una promesa o funciones asíncronas. En tu caso, la función renderComponents debería ...
- 1,700
0
votos
Como validar si un table (tbody) tiene información sin contar el encabezado
si tienes que las filas se generan en base a la variable data, si el data.length es == 0 es porque no hay ninguna fila en la tabla.
- 155
0
votos
React Router no me posiciona al inicio de la pagina
No tengo claro como es tu diseño, pero donde tengas tus rutas puedes verificar el cambio de ubicación en un useLayoutEffect en el wrapper que esta envolviendo tus rutas. Si existe un cambio, se ...
0
votos
Validar que no se ingresen ni comas ni puntos en un input . React
if (
e.key === '+' ||
e.key === '-' ||
e.key === 'e' ||
e.key === ',' ||
e.key === '.'
) {
e.preventDefault();
}
Ya suponiendo que tu input es type='number' podrías poner ...
1
voto
Aceptado
Deploy en React
Intenta modificar:
En tu package.json modifica el nombre de la propiedad "homepages" a "homepage". Borras tu carpeta de build y haces otra ves el deploy.
Si no te funciona ...
- 164
0
votos
Actualizar datos en usuarios en linea sin que refresquen
Para este caso tienes que utilizar socket.io, tienes que instalar y configurarlo tanto como en el lado del frontend como en el backend. Ya que el frontend (en tu caso react) debe de estar pendiente ...
- 164
0
votos
Cómo subo una app hecha con Next.js a Hostinger?
Por como estan construidas las aplicaciones de Next.js estas necesitan utilizar otros servicios que el host compartido de hostinger no incluye, sin embargo el servicio de VPS lo incluye, pero este ...
- 1
0
votos
Error al guardar imagen en la galeria React cordova
El plugin que usas permite guardar datos base64 como imagen en el dispositivo.
El problema que presentas:
PluginManager: Uncaught exception from plugin
java.lang.NullPointerException: Attempt to ...
- 107k
0
votos
No se reflejan los cambios de react en mi servidor
No sé si fue la forma correcta pero logré solucionarlo.
Lo que hice fue eliminar la carpeta build que ya se encontraba dentro de mi proyecto en el servidor y ejecutar de nuevo npm run build, lo cual ...
0
votos
Aceptado
Error 400 al hacer Post con axios
Directamente no lo hice con axios, busqué de otra manera y acá está la respuesta
const [id, setId] = useState("");
const [nombre, setNombre] = useState("");
const [correo, ...
- 369
1
voto
Aceptado
Renderizado de api con next js 13
Parece que falta regresar el jsx del callback data.map, agrega el return keyword:
<>
{data.map((post, index) => {
return <div key={index}>
<h4>{post.name}</h4&...
- 3,156
0
votos
Es posible guardar en un useState un array de un json?
Bien, al parecer estaba recibiendo el json como un objeto y no como un array, es por eso que no podia mapearlo. Por lo que tenia que ubicar la respuesta en un array cuando lo guardaba...
function ...
- 369
0
votos
Cuando debo utilizar "arrow function" y cuando utilizar "function" en mis componentes de ReactJs
Depende de la situación, pero comparto generalidades.
El primer ejemplo se conoce como JavaScript function declaration:
function Home() {
return <div>Esto es la ventana Home </div>;
}
...
- 3,156
0
votos
Cuando debo utilizar "arrow function" y cuando utilizar "function" en mis componentes de ReactJs
Te responderé en terminos de Javascript puro, ya que para react esto también se debería cumplir.
La principal diferencia (en mi opinión) es el scope, por ejemplo al utilizar this
Demo:
const ...
- 8,914
0
votos
Como mostrar datos obtenidos a traves de un Fetch en ReactJS
El problema es sencillo no estás guardando correctamente el resultado en el estado de la aplicación, cuando haces el
function Activity() {
function LoadActivity() {
fetch("https://localhost:...
- 61
1
voto
Mostrar video en thumbs react boostrap carousel
La solución para el inconveniente que tenia fue el siguiente.
Realice una funcion llamada customRenderThumbs
const customRenderThumb = () =>
list.map((prop, id) => {
return <img ...
1
voto
react responsive carousel no pausa el video cuando hago slide
Para solucionar dicho problema use un ref para mi etiqueta video
const videoRef = useRef(null)
<video ref={videoRef} muted controls autoPlay >
<source src={prop.src} type="video/...
1
voto
Como puedo usar useState hook en un bucle infinito?
Esa clase de cosas, setInterval o setTimeouts o ese tipo de web API's deberían ser usadas dentro de useEffect, debemos de limpiar el interval usando clearInterval y mandandole nuestro interval a ...
- 1,003
0
votos
Manejar los estados de varios modales
No sé cómo no me di cuenta antes, la mejor manera es extraer todo lo que regresa el .map() en un nuevo componente, por eje , pasarlo por props el item y manejar todos los estados del modal en dicho ...
- 315
3
votos
Aceptado
Cannot read properties of undefined trim()
El problema esta en que el tipo de dato de inputValue es undefined. El metodo trim() funciona para un tipo de dato string.
Intenta inicializar el useState con un string vacio:
const [inputValue, ...
- 121
1
voto
Aceptado
Middleware en next.js parece no hacer nada
Resuelto, el problema se debe a que el middleware.js no debe estar dentro de la carpeta pages, sino al mismo nivel de la misma. Es decir:
...
|- pages/
|- middleware.js
...
- 61
1
voto
Aceptado
ClearInterval no funciona en ReactJS
El problema es que la referencia al intervalId se pierde cuando se cambia el estado del componente... define el intervalId como useRef para que la referencia no se pierda, así:
function Cuadrado() ...
- 2,986
0
votos
Arreglo de objetos alterado con Metodo Find no actualiza el estado en React
El asunto con React, y arreglos, es que react trata de buscar que haya cambiado algo en la variable, pero tu arreglo generalmente es el mismo, lo que se suele usar en React es el spread operator (...),...
- 1,003
1
voto
Aceptado
completar un state mediante un filter y map
Lo solucione agregando lo siguiente :
data
.filter((dat) => dat.mes === mesAnterior && dat.anio === anioNuevo)
.map((da) =>
setDatosPorCopiar((prevState) => [
......
- 37
0
votos
Aplicar marcador en Mapbox a partir de un nivel de zoom
Necesitarían conseguir el zoom actual, puebren con algo así:
map.on('zoom', () => {
map.getZoom();
});
Luego usas ese zoom para crear tu condición. Espero les sirva.
- 21
0
votos
Aceptado
React: como puedo redirigir a otra ruta luego de haberme logueado
useHistory es un hook que se usaba en react-router-dom v5, así que como estás usando la versión 6, necesitar usar ahora useNavigate
let navigate = useNavigate();
navigate('admin', { replace: true ...
- 1,003
0
votos
Loader, mientras se cargan los datos en la tabla
Puedes hacerlo utilizando el estado loading para controlar la visualización del spinner true para mostrarlo y false para ocultarlo, lo harías usando el callback en el then de la promesa del get.
...
- 327
0
votos
React - Como evitar algun metodo de arrays para que no salte el error cuando este es undefined?
La verdad que no estoy probando el codigo por lo que no se si te va a funcionar asi o si tiene algun error.
Lo primero que haria es modificar el fetch y ponerlo en el useEffect con dependencia vacia ...
- 2,522
2
votos
Aceptado
Importar el component table con parametros en otro componente
Prueba con esto
import Table from './Table';
class OtherComponent extends React.Component {
render() {
return (
<div>
<Table data={this.props.data} columns={this.props....
1
voto
Importar el component table con parametros en otro componente
Puedes hacerlo así, modifica tu componente para que acepte prop data
const renderTable = ({ data }) => {
// El código que renderiza la tabla
}
En el componente Tabla en vez de llamar a Table ...
- 327
0
votos
Como agregar un estado resultado de una funcion al submit en react?
por lo que veo excelItems se define en el component useExcel y no está disponible en useForm. Lo que puedes hacer para que excelItems sea accesible es pasarla como un prop adicional en el método ...
- 327
0
votos
Problema con fetch y CORS en React
SOLUCIÓN 2022/2023 y listo! Adios dolores de cabeza
app.use(cors({ "Access-Control-Allow-Origin" : "http://localhost:3000/" }));
1
voto
Aceptado
¿Cómo colocar una condición dentro de return en React?
puedes usar un operador condicional (ternario) dentro del .map() para mostrar el elemento según corresponda.
El operador condicional (ternario) es el único operador en JavaScript
que tiene tres ...
- 327
1
voto
Aceptado
¿Cómo obtener el siguiente indice del indice actual en un array de objetos?
Esto es para probar si el video j + 1 existe.
De lo contrario, restablezca j e incremente i usando variables temporales a y b.
const cursos = {
nombre: "Trading Básico",
cantidad_modulos: 2,
...
0
votos
Props History push, después de insertar un registro
Y si tratas de desestructurar props antes de realizar el request?
const { history } = this.props
try {
fetch(...)
.then(res => res.json())
.then(data => {
switch(condicion) {
...
- 4,625
1
voto
Aceptado
Problema con el uso de imágenes en React
Mejor importa la imagen de esta forma.
CODIGO
import imagen from "../imagenes/Pac-Man_Cutscene.svg.png";
const App = () => {
return (
<>
<img src={imagen} />
&...
- 630
0
votos
Aceptado
¿Es posible enviar un icono de Fontawesome a un componente?
Puedes hacerlo siguiendo las indicaciones de la documentación de la siguiente manera:
import { solid, regular, brands, icon } from '@fortawesome/fontawesome-svg-core/import.macro'
Importas los macros ...
- 365
0
votos
Firebase me dice que hay 19k peticiones pero no es cierto, o si?
Tienes lo siguiente:
const articlesCollectionRef = collection(db, 'posts');
Esto significa que en cada refresco de tu componente estás pidiendo esa información a firebase.
Por algún motivo tu ...
- 48.3k
Se incluyen las 50 respuestas más recientes
Etiquetas relacionadas
reactjs × 3944javascript × 1716
react-hooks × 345
nodejs × 313
react-native × 227
react-router-dom × 166
html × 160
typescript × 151
css × 147
firebase × 147
redux × 139
api × 118
json × 106
axios × 102
react-redux × 100
array × 88
npm × 80
express × 79
fetch × 70
jsx × 68
usestate × 64
material-ui × 63
mongodb × 54
bootstrap × 49
next.js × 49