We Keep Coding

render custom component on table based on the value of my data object?

I have a Table component which I want to render custom component based on my data (which is an array of objects) also I need my component (I mean Table component) to have two props, one is the data object and another one is an array of objects which each object has two properties: a title and a function that render different component based on the data key. for example if the key in data object is fullName, I need to render a paragraph tag or if key is avatar, I need to return an image tag and so on.. let me show in code:
const Table = () => {
const data= [
{
id: 1,
avatar: 'blah blah blah',
fullName: 'Arlan Pond',
email: 'apond0#nytimes.com',
country: 'Brazil',
registerDate: '1/11/2021',
status: 'active',
},
];
const cols = [
{
title: 'ID',
componentToRender(rowsArr) { //this is how I defined my method.
rowsArr.map((el, index) => {
return <td>{el.id}</td>;
});
},
},
{
title: 'Avatar',
componentToRender(rowsArr) { //this is how I defined my method.
rowsArr.map((el, index) => {
return <td><span>{el.avatar}</span></td>;
});
},
},
];
return (
<div className='table-responsive' style={{width: '95%'}}>
<table className='table table-borderless'>
<thead>
<tr>
//here I need to show my headers...
{cols.map((el, index) => {
return <th key={index}>{el.title}</th>;
})}
</tr>
</thead>
<tbody>
//here I need to fill my table with components.
<tr className='table-row'>
{cols.map((el, index) => {
return el.componentToRender(data);
})}
</tr>
</tbody>
</table>
</div>
);
};
and the problem is table show only headers but data cells are empty. how can I achieve this?

This is one of the objects that you have defined.
{
title: 'ID',
componentToRender(rowsArr) { //this is how I defined my method.
rowsArr.map((el, index) => {
return <td>{el.id}</td>;
});
},
}
if you look closely , you will see that you are not returning anything from the function. The return keyword that you have used, goes back to the map method. So to fix the problem, you will need to change the code like this:
{
title: 'ID',
componentToRender(rowsArr) { //this is how I defined my method.
return rowsArr.map((el, index) => {
return el.id;
});
},
}
and tbody logic needs to change as well:
<tbody>
<tr className='table-row'>
{cols.map((el, index) => {
return <td key={index}>{el.componentToRender(rows)}</td>;
})}
</tr>
</tbody>

I refactored the component rendering. Instead of looping trough data in every component render, I created a data.map inside <tbody>, which creates a <tr> for every data entry (every object inside data array) and then renders the needed component based on the title.
Beware! title in cols should have the same naming case as the one in data. (for example both should be Avatar or avatar)
import "./styles.css";
const Table = () => {
const data= [
{
ID: 1,
Avatar: 'blah blah blah', // Capitalized like the Avatar in cols
fullName: 'Arlan Pond',
email: 'apond0#nytimes.com',
country: 'Brazil',
registerDate: '1/11/2021',
status: 'active',
},
{
ID: 2,
Avatar: 'blah blah blah2',
fullName: 'Arlan Pond',
email: 'apond0#nytimes.com',
country: 'Brazil',
registerDate: '1/11/2021',
status: 'active',
},
];
const cols = [
// refactored the components
{
title: 'ID',
component(content) { return <td>{content}</td> }
},
{
title: 'Avatar',
component(content) { return <td><span>{content}</span></td> }
},
];
return (
<div className='table-responsive' style={{width: '95%'}}>
<table className='table table-borderless'>
<thead>
<tr>
{cols.map((el, index) => {
return <th key={index}>{el.title}</th>;
})}
</tr>
</thead>
<tbody>
{/* completely changed here */}
{data.map((entry, entryindex) => {
return <tr className='table-row'>
{cols.map((el, index) => {
return el.component(data[entryindex][el.title])
})}
</tr>
})}
</tbody>
</table>
</div>
);
};
export default function App() {
return (
<div className="App">
<Table />
</div>
);
}
See it live in Codesandbox

React: How to update the state of an object when a user selects a value from a drop-down menu?

I'm new to coding and I'm trying to create a project which has one component where a user can select if a student is Present, Absent, or Late for a class. I'm using React for this and I have created the display with a drop-down menu that shows the options for Present, Absent, or Late.
I'm having trouble changing the student's attendance value after the user has selected if they are present or not from the drop-down menu. Ideally, I would like the submitted results to be displayed in another tab with a list of all the students and their attendance for that day. This is part of the code that I have:
Attendance Component:
class Attendance extends Component {
constructor(props) {
super(props);
this.state = {
students: StudentsAlphabetical,
list: [
{idA: "0", option: "Present"},
{idA: "1", option: "Absent"},
{idA: "2", option: "Late"},
],
studentAttendance: {
id: students.id,
FirstName: students.firstName,
LastName: students.lastName,
Attendance: " ",
},
};
// Destructuring this.state.students
const { id, lastName, firstName } = this.state.students;
// Getting the length of the students array
const studentsLength = this.state.students.length;
// Destructuring this.state.list
const { idA, option } = this.state.list;
};
changeAttendance method:
changeAttendance() {
this.state.studentAttendance.map(value => (
<tr key={value.id}>
<td>{value.firstName}</td>
<td>{value.lastName}</td>
<td>{value.Attendance}</td>
</tr>)
};
render method:
render() {
return(
<form onSubmit={this.handleSubmit}>
<Table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Attendance</th>
</tr>
</thead>
<tbody>
{/*Use the map array method to go through the students array and create the table row for each student*/}
{this.state.students.map((student =>
<tr key={student.id}>
<td>{student.firstName}</td>
<td>{student.lastName}</td>
<td> {/*Creating dropdown button that will show if student is Present, Absent or Late*/}
<select>
{this.state.list.map(item => (
<option key={item.idA} value={item.option}>
{item.option}
</option>
))}
</select>
</td>
</tr>))}
</tbody>
</Table>
<Button color="secondary" size="lg" block onClick={this.changeAttendance}> {/*Submit button*/}
Submit Attendance
</Button>
</form>
);
};
I would like some advice as to how I can change the Attendance part in the studentAttendance array after the user has selected from the drop-down menu if the student was either Present, Absent or Late. Thank you!

I think your target is something like this, try this way:
sandbox link:
https://codesandbox.io/s/fervent-hoover-9w31y?file=/src/App.js
import "./styles.css";
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectValue: "Absent",
students: [
{ id: 1, name: "st1", attendance: "-" },
{ id: 2, name: "st1", attendance: "-" },
{ id: 3, name: "st1", attendance: "-" }
]
};
}
handleChange = (e, id) => {
let newStudents = this.state.students.map((item) => {
if (item.id === id) {
return { ...item, attendance: e.target.value };
} else {
return item;
}
});
this.setState({ students: newStudents });
};
render() {
return (
<div>
<table style={{ marginTop: 20 }}>
<p>List: </p>
{this.state.students.map((item) => {
return (
<tr>
<td>id: {item.id}</td>
<td>name: {item.name}</td>
<td>
attendance:{" "}
<span>
<select
value={item.attendance}
onChange={(e) => this.handleChange(e, item.id)}
>
<option value="Present">Present</option>
<option value="Absent">Absent</option>
<option value="Late">Late</option>
</select>
</span>
</td>
</tr>
);
})}
</table>
</div>
);
}
}
export default App;

ReactJS unable to get search filter (text) working

I am trying to develop a very simple dashboard with some information. I'm trying to add in a search filter into my code so that I can narrow my data by names. In many other tutorials, I found that they have common used name.toLowerCase().indexOf(this.state.filterName.toLowerCase()) >= 0 but I just didn't work for me and would like to seek guidance from you guys.
You may also provide feedback on the general structure of my code!
Tables.js
class Table extends Component {
constructor(props){
super(props);
this.state = {
filterName: this.props.filterName,
toShow: 'all',
myArrays: [
{ 'id': 1, 'name': 'Eric', 'email': 'name1#email.com', 'role': 'student', 'isadmin': 'false' },
{ 'id': 2, 'name': 'Amanda', 'email': 'name2#email.com', 'role': 'student', 'isadmin': 'false' },
{ 'id': 3, 'name': 'Brenda', 'email': 'name3#email.com', 'role': 'staff', 'isadmin': 'true' },
{ 'id': 4, 'name': 'Charles', 'email': 'name4#email.com', 'role': 'teacher', 'isadmin': 'true' },
{ 'id': 5, 'name': 'Daimon', 'email': 'name5#email.com', 'role': 'assistant', 'isadmin': 'false' }
]
};
this.toShowAdmin = this.toShowAdmin.bind(this);
}
toShowAdmin(){
if (this.state.toShow === 'all'){
this.setState({ toShow: 'admin' }, () => console.log(this.state.toShow ))
} else {
this.setState({ toShow: 'all' }, () => console.log(this.state.toShow ))
}
}
render(){
let myArrays = []
if (this.state.toShow === 'all'){
myArrays = this.state.myArrays;
} else if (this.state.toShow === 'admin'){
myArrays = this.state.myArrays.filter(row => row.isadmin === 'true')
}
myArrays = this.state.myArrays.filter(row => {
return row.name.toLowerCase().indexOf(this.state.filterName.toLowerCase()) >= 0;
});
return(
<div>
<table className="table">
<thead className="thead-dark">
<tr>
<th scope="col"> name </th>
<th scope="col"> email </th>
<th scope="col"> role </th>
<th scope="col"> isadmin </th>
</tr>
</thead>
<tbody>
{myArrays.map(row=>
<tr key={row.id}>
<td> {row.name} </td>
<td> {row.email} </td>
<td> {row.role} </td>
<td> {row.isadmin} </td>
</tr>
)}
</tbody>
</table>
<button type='button' className='btn btn-primary' onClick={this.toShowAdmin}> Admins </button>
{ this.state.filterName }
</div>
);
}
}
export default Table;
Main.js
class Main extends Component {
constructor(props){
super(props);
this.state = {
filterName: ''
};
this.filterUpdate = this.filterUpdate.bind(this);
}
filterUpdate(value){
this.setState({ filterName: value}, () => console.log(this.state.filterName))
}
render(){
return(
<div>
<Search
filterName={this.state.filterName}
filterUpdate={this.filterUpdate}/>
<Tables
filterName={this.state.filterName}/>
</div>
);
}
}
export default Main;

You have to use componentWillReceiveProps to update your child state with parent props once the child component has been loaded. Add something like this to child component -
componentWillReceiveProps(){
this.setState({filterName: this.props.filterName})
}
See this Stack Over Flow Answer
Otherwise, if your logic allows you to use the prop directly in render, you may also do -
myArrays = this.state.myArrays.filter(row => {
return row.name.toLowerCase().indexOf(this.props.filterName.toLowerCase()) >= 0;
});
edit - use componentDidUpdate()
As rightly pointed out in comments, componentWillReceiveProps() is deprecated. Use componentDidUpdate() instead.
componentDidUpdate(){
this.setState({filterName: this.props.filterName})
}

You should use this.props.filterName directly like this:
myArrays = this.state.myArrays.filter(row => {
return row.name.toLowerCase().indexOf(this.props.filterName.toLowerCase()) >= 0;
});

How can I render API data into separate tables based on the value in React?

I'm trying to create a simple NBA boxscore web app in React, but I am having trouble rendering the API data into separated tables for each game. I am trying to create separate tables with its own headers for each game based on the gameID value from the API. How can I achieve this?
import React, { Fragment } from 'react';
import ScoreCards from './ScoreCards';
const ScoreCardData = ({ gameStats }) => {
return(
<table>
<tbody>
<tr>
<td>gameID</td>
<td>Players</td>
<td>FGM/A FG%</td>
<td>FTM/A FT%</td>
<td>3PTM</td>
<td>PTS</td>
<td>REB</td>
<td>AST</td>
<td>ST</td>
<td>BLK</td>
<td>TO</td>
</tr>
{Object.keys(gameStats).map((gameData, i) => {
return(
<Fragment>
<tr key={i}>
<td>{gameStats[gameData].game.id}</td>
</tr>
</Fragment>
)
})
}
</tbody>
</table>
)
};
export default ScoreCardData;
Here is the code where I try to render the API data. I'm able to get a list of all the game ID's in one table, but I want to separate them according to gameID value so that I can display each table as a separate game. I also want to have the header row with all the stat names to be displayed for each table.
I'm basically just trying to create a simple NBA box score website, but I am having trouble actually rendering the data into a box score format. This is my first web application that I am creating, so I am very lost. Any help would be appreciated.
Fullsize Image

Please try like this, if want to display separate table based on game id, we need to group the data first by game.id then loop through original gameStats data via Object.keys.
Demo link: https://codesandbox.io/s/8yjwk4nzv2
import groupBy from "lodash.groupby";
const ScoreTable = props => {
console.log("props.gameStats ", props.gameStats);
return (
<table>
<tbody>
<tr>
<td>gameID</td>
<td>Players</td>
<td>FGM/A FG%</td>
<td>FTM/A FT%</td>
<td>3PTM</td>
<td>PTS</td>
<td>REB</td>
<td>AST</td>
<td>ST</td>
<td>BLK</td>
<td>TO</td>
</tr>
{props.gameStats.map((gameData, i) => {
return (
<Fragment>
<tr key={i}>
<td>{gameData.game.id}</td>
</tr>
</Fragment>
);
})}
</tbody>
</table>
);
};
const ScoreCardData = props => {
return Object.keys(props.gameStats).map((item, i) => {
return <ScoreTable gameStats={props.gameStats[item]} />;
});
};
const gameStats = [
{
game: { id: 47820 },
player: {},
stats: {},
team: { id: 57, abbreviation: "POR" }
},
{
game: { id: 47820 },
player: {},
stats: {},
team: { id: 57, abbreviation: "POR" }
},
{
game: { id: 5000 },
player: {},
stats: {},
team: { id: 57, abbreviation: "POR" }
},
{
game: { id: 5000 },
player: {},
stats: {},
team: { id: 57, abbreviation: "POR" }
},
{
game: { id: 6000 },
player: {},
stats: {},
team: { id: 57, abbreviation: "POR" }
}
];
const groupedData = groupBy(gameStats, "game.id");
console.log("groupedData ", groupedData);

If gameStats is an array of objects, and each object is a unique game, you can render a table per unique game by moving all of your logic within the map function. This is assuming you want an actual <table>...</table> per game.
import React, { Fragment } from 'react';
import ScoreCards from './ScoreCards';
const ScoreCardData = ({ gameStats }) => {
return(
{Object.keys(gameStats).map((gameData, i) => {
return (
<Fragment>
<table>
<tbody>
<tr>
<th>gameID</th>
<th>Players</th>
<th>FGM/A FG%</th>
<th>FTM/A FT%</th>
<th>3PTM</th>
<th>PTS</th>
<th>REB</th>
<th>AST</th>
<th>ST</th>
<th>BLK</th>
<th>TO</th>
</tr>
<tr key={i}>
<td>{gameStats[gameData].game.id}</td>
...
<td>{gameStats[gameData].game.to}</td>
</tr>
</tbody>
</table>
</Fragment>
)
})
})
};
export default ScoreCardData;

React editable table

I have built a React table like so:
const Table = ({data}) => {
return (
<table className="table table-bordered">
<thead>
<tr>
<th>Qty</th>
<th>Description</th>
<th>Price (£)</th>
</tr>
</thead>
<tbody>
{data.map((row) => {
return (
<tr>
<td><input type='number' className='form-control' step='1' min="1" value={row[0]}/></td>
<td><input type='text' className='form-control' value={row[1]}/></td>
<td><input type='text' className='form-control' placeholder='6.00' value={row[2]}/></td>
</tr>
);
})}
</tbody>
</table>
);
};
Table.propTypes = {
data: React.PropTypes.array.isRequired
};
export default Table;
In the class I am using this component I am passing data as a parameter (which is initially empty):
materials: [[],[],[],[],[],[],[],[],[],[]] //Initialise with 10 empty rows
<Table data={materials} />
This will build up a table with 10 empty rows. The only problem now is that when I enter data into the table, the data array that I have mapped does not update with the data I have entered.
I think what I need is some event where I can update the data with a snapshot of what has been entered but I am not sure how to implement this. Any help would be greatly appreciated.

React doesn't work with two-way data binding, like Angular JS does, for instance. props are read-only, so you would need update them where they belong.
For instance, the parente component, where <Table /> is declared could have materials array in its state and, besides passing materials as props, it could pass a function handler like onCellChange(row, column), so you could bind it with the onChange events in the inputs elements.
Like so,
const Table = ({data, onCellChange}) => {
return (
<table className="table table-bordered">
<thead>
<tr>
<th>Qty</th>
<th>Description</th>
<th>Price (£)</th>
</tr>
</thead>
<tbody>
{data.map((row, index) => {
return (
<tr key={index}>
<td><input type='number' className='form-control' step='1' min="1" value={row[0]} onChange={() => onCellChange(index, 0)}/></td>
<td><input type='text' className='form-control' value={row[1]} onChange={() => onCellChange(index, 1)}/></td>
<td><input type='text' className='form-control' placeholder='6.00' value={row[2]} onChange={() => onCellChange(index, 2)}/></td>
</tr>
);
})}
</tbody>
</table>
);
};
Table.propTypes = {
data: React.PropTypes.array.isRequired
};
So, at the parent component, you would declare the component like <Table data={this.state.materials} onCellChange={this.onCellChange} />.
And it would have a method like this:
onCellChange: function(row, column) {
//update the cell with this.setState() method
}

You can achieve this by maintaining state of your table data. I've made a rough structure of how you could do it here: http://codepen.io/PiotrBerebecki/pen/QKrqPO
Have a look at the console output which shows state updates.
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
materials: props.data
};
}
handleChange(index, dataType, value) {
const newState = this.state.materials.map((item, i) => {
if (i == index) {
return {...item, [dataType]: value};
}
return item;
});
this.setState({
materials: newState
});
}
render() {
console.clear();
console.log(JSON.stringify(this.state.materials));
return (
<table className="table table-bordered">
<thead>
<tr>
<th>Qty</th>
<th>Description</th>
<th>Price (£)</th>
</tr>
</thead>
<tbody>
{this.state.materials.map((row, index) => {
return (
<tr>
<td>
<input onChange={(e) => this.handleChange(index, 'qty', e.target.value)}
type='number'
className='form-control'
step='1' min="1"
value={this.state.materials[index].qty}/>
</td>
<td>
<input onChange={(e) => this.handleChange(index, 'desc', e.target.value)}
type='text'
className='form-control'
value={this.state.materials[index].desc}/>
</td>
<td>
<input onChange={(e) => this.handleChange(index, 'price', e.target.value)}
type='text'
className='form-control'
placeholder='6.00'
value={this.state.materials[index].price}/>
</td>
</tr>
);
})}
</tbody>
</table>
);
}
}
const materials = [
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' },
{ qty: '', desc: '', price: '' }
]
ReactDOM.render(<Table data={materials} />, document.getElementById('app'));

you need to update the state onChange:
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
);
}