MERN 4 React JS – Sistemi per renderizzare

Prova

ciao prova
 

Stile

    function colorazione(index2) {
        var colore = 'black'
        var colore_bordo = 'solid red'
        if (props.lista_materie[index2].colore_bordo != undefined) {
            colore_bordo = '3px solid ' + props.lista_materie[index2].colore_bordo
        }

        var hStyle = { backgroundColor: 'lightgray', color: colore, margin: '5px', padding: '5px', border: colore_bordo, borderRadius: '2px' };
        return hStyle;
    }

    const Chiusura_della_finestra_modale = () => {
        setShow(false);
    }

    const apertura_finestra_modale = (index) => {
        set_materia_scelta(index)
        setShow(true)
    }
  <div style={colorazione(item)} class="d-flex flex-fill justify-content-between" >

Usare una funzione per renderizzare

    function Mostra_progress_bar(d1) {
        var d = new Date(d1);
        var datestring = d.getDate()  + "/" + (d.getMonth()+1) + "/" + d.getFullYear() + " ora " +
        d.getHours() + ":" + d.getMinutes();

            return <>
                {datestring}
            </>
    }
return <div>
        <Row>
            <span>Data: <strong>{Mostra_progress_bar(item.date)}</strong></span>        
        </Row>
        <hr class="rounded"></hr>
      </div>

Renderizzare una Lista

{lista_programmi.map(function (item1, index2) {
        {
            return <div>
                <Dropdown.Item eventKey={item1._id}> {item1.nome} </Dropdown.Item>
            </div>
        }
    })
}

Renderizzare direttamente da una funzione

    function trasforma_data(data_item) {
        var localDate = new Date(data_item);
//        console.log(data_item.getFullYear())
        var localDate = new Date(data_item).toLocaleString("it-IT", {
            localeMatcher: "best fit",
            timeZoneName: "short"
        });
//        console.log(localDate)
        return <> {localDate} </>
    }

Chiamata di una funzione passando due parametri

    const cancella_variabile =  (id, id_array)  => {
    }
  <td>
    <button onClick={() => cancella_variabile(props.item._id,item2._id)}> Cancella</button>
  </td>

Chiamata di una funzione senza passare parametri

    const cancella_risposta_singola =  ()  => {
     
    }
      <Button variant="primary" onClick={() => cancella_risposta_singola()}>Cancella</Button>

Parametro booleano

  variant={idx % 2 ? 'outline-success' : 'outline-danger'}