0

Como eu posso criar esses buttons dentro da minha <div className="box-statusA"> quando chegar nos indices dos status escolhido


import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import {useHistory} from 'react-router-dom';

import './style.css'

export default function StatusA(props){

    let estados = ['Geração Iniciada', 'Geração Finalizada', 'Registro Inciado', 'Registro Finalizado']

    function Button(){

        if(estados.length == 4){
            const button = (  
                <button>Conitinuar</button>      
            )

            ReactDOM.render(button, document.getElementById('button'))
        }

        else if(estados.length == 6){
            const buttons = (
                <div>
                    <button>Continuar</button>
                    <button>Reiniciar</button>
                </div>
            )

            ReactDOM.render(
                buttons,
                document.getElementsByClassName('buttons')
            )
        }
    }

    Button()

    return(

        <div className="container">

            <div className="box-statusA">

                <div className="spinner">

                </div>

                <div id="button">

                </div>


            </div>

        </div>
    )
}

4
  • Você deve renderizar dentro do método return... Com {buttons} no local que faz sentido dentro da estrutura HTML Commented 24/05/2020 às 18:54
  • estados == estados[4] não faz sentido... estás a comparar uma arrya inteira com a posição 4 dela própria... podes rever esses nomes?
    – Sergio
    Commented 24/05/2020 às 19:00
  • @RafaelTavares é que ele só ira aparecer depois que for executado alguns processos, como esses que foram listados.
    – JAVASTO
    Commented 24/05/2020 às 19:05
  • Não se usa ReactDOM para criar condições, e não entendi realmente o seu problema, poderia explicar melhor?
    – novic
    Commented 25/05/2020 às 16:19

2 Respostas 2

1

Podes tratar esses botões como uma array e usar if para acrescentar botões a essa array. Depois para inserires esses botões dentro do componente basta {botões}.

Nota que a tua array, assim como está "hardcoded", tem sempre .length === 4, mas imagino que ela seja dinâmica vindo das props ou um state que não mostras aqui...

Exemplo (com 6 elementos na array):

 let estados = ['Geração Iniciada', 'Geração Finalizada', 'Registro Inciado', 'Registro Finalizado', 'algo mais...', 'e ainda mais algo'];

function StatusA(props) {

  const buttons = [(<button>Continuar</button>)];
  if (estados.length == 6){
    buttons.push((<button>Reiniciar</button>));
  }

  return (
    <div className="container">
      <div className="box-statusA">
        <div className="spinner"></div>
        {buttons}
      </div>
    </div>
  )
}

ReactDOM.render(
  <StatusA />,
  document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

0

Amigo nestes casos pode usar operadores ternários conforme o código abaixo, deixando o mais limpo e claro.

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import {useHistory} from 'react-router-dom';

import './style.css'

export default function StatusA(props){
  let estados = [
    'Geração Iniciada',
    'Geração Finalizada',
    'Registro Inciado',
    'Registro Finalizado',
  ]

  return (
    <div className="container">
      <div className="box-statusA">
        <div className="spinner" />

        <div id="button">
          {estados.length === 4 && <button>Conitinuar</button>}
          {estados.length === 6 && (
            <div>
              <button>Continuar</button>
              <button>Reiniciar</button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .