0

Lo que trato de hacer es que el componente mediante un boton se actualiza y cambio a otro y asi sucesivamente (pienso en crear 5 asi como la imagenes),pero no he podido ver algun ejemplo de como poder replicar,tengo por entendido que podria juntarlos en un componente padre(por ahora solo lo pongo en el index.js),yo normal podria juntarlos y crear cinco componentes padres(todavia no lo hago) pero como podria cambiar estos componentes padres con un boton siguiente y atras para que funcionione,he visto ejemplos con id como un contador,pero como seria los ajustes para este caso?

//Este el componente que compone los inputs y labels

function Valor(props) {
        return (
            <div className="form-group centm">
                <label htmlFor="ㅤ">{props.pregunta}</label>
                <input type="number" className={props.name} />
            </div>
        );
    }

export default Valor;

//Este el componente de los botones ,todavia no le puesto el onclick

function Boton(props) {
    return (
        <button className={'btn ' + props.btnclass}>{props.btname}</button>
    );
}

export default Boton;

Me podrian indicar algun metodo mejor,o que metodo deberia usar;si pudieran como un ejemplo minimo?

Conjunto 1

Conjunto2

0

1 respuesta 1

0

Lo que necesitas es crear un estado global, puedes utilizar redux, o si solo es en este caso en especifico recomiendo usar el contexto de react, en tu caso seria algo asi usando lo ultimo mencionado:

En un archivo llamado context/MyEstadoGlobalContext.js

import React from 'react';
const MyEstadoGlobalContext = React.createContext({ mostrar: false, setMostrar: () => {} 
});
export {MyEstadoGlobalContext};

En tu app.js:

import {MyEstadoGlobalContext} from './context/MyEstadoGlobalContext';
import React from 'react';

function App() {
  const [mostrar, setMostrar] = React.useState(false);
  return (
    <MyEstadoGlobalContext.Provaider value={{mostar, setMostrar}}>
      <TusComponentes />
    <MyEstadoGlobalContext.Provaider>
  );
}

De este modo has creado un estado global con valores iniciales, en el componente donde quieras usar o cambiar este estado recomiendo usar los hooks de react:

import React from 'react';
import {MyEstadoGlobalContext} from './context/MyEstadoGlobalContext';

const {mostrar, setMostrar} = React.useContext(MyEstadoGlobalContext);

Lo anterior lo harias en los lugares en tu proyecto donde necesites el estado global

Con el setMostar cambias el valor de mostrar, por lo que si quieres que se vea harias

setMostrar(true); 

y el componente que quieras que se vea o no, harias algo asi:

{mostrar && <ComponenteParaEsconder/>}

Esta seria la forma mas simple, sin complicarse con redux, te recomiendo leer la documentacion para encontrar mas información, espero haberte ayudado.

3
  • Si tuviste que copiar exactamente tu respuesta, entonces es la mimsa pregunta no? entonces se cierra la pregunta por duplicado?
    – gbianchi
    el 9 abr. 2021 a las 12:27
  • Supongo que si, lo correcto en la respuesta que di, debio haber dado el link a la otra respuesta mia?
    – Jamt0
    el 9 abr. 2021 a las 14:46
  • 1
    Lo correcto es que si tenes que copiar una respuesta, reportes la pregunta como duplicado.
    – gbianchi
    el 18 abr. 2021 a las 1:00

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.