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)
}
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}
</>
}
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>
<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>
}
})
}
{
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} </>
}
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>
<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'}
