How to use Reactdom to create Buttons through conditions

Asked

Viewed 55 times

0

How can I create these Buttons within my <div className="box-statusA"> when arriving in the indices of the status chosen 


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>
    )
}
javascript react react-dom

  • You must render within the Return... Com method {buttons} in the place that makes sense within the HTML structure

  • estados == estados[4] doesn’t make sense... you’re comparing an entire arrya to her own position 4... you can review those names?

  • @Rafaeltavares is that it will only appear after some processes are executed, such as those that have been listed.

  • You don’t use Reactdom to create conditions, and I don’t really understand your problem, I could explain it better?

2 answers

1

You can treat these buttons as an array and use if to add buttons to that array. Then to insert these buttons into the component just {botões}.

Note that your array as it is "hardcoded", always has .length === 4, but I imagine it’s dynamic coming from props or a state that you don’t show here...

Example (with 6 elements in the 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

Friend in these cases can use ternary operators as per the code below, leaving the cleaner and clear.

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>
  )
}

Browser other questions tagged javascript react react-dom

You are not signed in. Login or sign up in order to post.