Trying to make a simple application based in .NET Core with a React front-end and i'm struggling to figure out why my data is not displaying, I'm going off of the React template for .NET Core, and trying to display an array of items in a table and the chrome console keeps telling me my keys should be unique but I'm stumped as to why it's not unique.
Here's the React JavaScript:
static renderPlantTable(Plants) {
return (
<table>
<tbody>
{Plants.map(plant =>
<tr key={plant.PlantID}>
<td><img src={"https://blog.ontariotechu.ca/hs-fs/hubfs/growth.gif?width=343&name=growth.gif"} alt=""></img></td>
<td>{plant.PlantName}</td>
<td>{plant.PlantID}</td>
<td>{plant.timelastWatered}</td>
<td><Button id="btnstart" onClick={this.StartWater}>Water me</Button></td>
<td><Button id="btnstop">Stop</Button></td>
</tr>
)}
</tbody>
</table>
);
}
render() {
let contents = this.state.loading
? <p><em>Loading...</em></p>
: Home.renderPlantTable(this.state.Plants);
return (
<div>
{contents}
</div>
);
}
async PopulatePlantData() {
const response = await fetch('Plant')
const data = await response.json();
this.setState({ Plants: data, loading: false })
}
Here's the controller that the React fetches
private static readonly string[] PlantNameArray = new []
{
"fern","ficus","daisy","sunflower","apple tree"
};
private readonly ILogger<PlantController> _logger;
public PlantController(ILogger<PlantController> logger)
{
_logger = logger;
}
[HttpGet]
public IEnumerable<Plants> Get()
{
var rng = new Random();
int plantid = 0;
return Enumerable.Range(0, 5).Select(index => new Plants
{
TimeLastWatered = DateTime.Now.AddDays(index),
PlantName = PlantNameArray[rng.Next(PlantNameArray.Length)],
PlantID = plantid++
})
.ToArray();
}