I am writing some react frontend application. I want to pass just header
from table
object to my function. I am using react-redux and redux-saga
In the reducer.js
I am creating this object table
, it has 2 arrays inside.
Code starts in render()
and then calls Table
which calls TableRows
and TableHead
Later I pass table to TableHead
as data
variable (to avoid using as html table). But when I do data.header
or data["header"]
in TableHead
method, the array I receive has 0 length and it is empty.
How can I get this array? I have to use map or some built-in functionality?
// Picture is created from this snippet
//AuthorsTable.js
const TableHead = ({data}) => {
console.log("Making header")
// var header = data.header
console.log(data)
console.log(data["header"])
console.log(data.header)
//reducer.js
...
case 'UPDATE_TABLE':
// console.log("Updating", action.author_obj.id)
var proto_obj = action.value;
// console.log("value:", obj)
var words = Object.keys(proto_obj).map(function (key) {
return {id: key, label: proto_obj[key]};
});
newState.table.header = [...newState.table.header, action.author_obj]
newState.table.content = [...newState.table.content, [words]]
return newState
...
//AuthorsTable.js
const TableHead = ({data}) => {
console.log("Making header")
// var header = data.header
console.log(data)
console.log(data["header"])
console.log(data.header)
var header = Object.keys(data.header).map(function (key) {
return {id: key, label: data[key]};
});
console.log(header)
const TableRows = ({data}) => {
return (<tbody><tr><td>content</td></tr></tbody>)
// for (let i = 0; i < 3; i++) {
// let children = []
// //Inner loop to create children
// for (let j = 0; j < 5; j++) {
// children.push(<td>{`Column ${j + 1}`}</td>)
// }
// return children
// }
}
const Table = ({data}) => {return(
<table>
<TableHead data={data} />
<TableRows data={data} />
</table>
)}
class AuthorsTable extends Component {
constructor(props) {
super(props);
}
render() {
const state = this.state;
// console.log(this.props.table)
return (
<Table data={this.props.table} />
// "Hello"
)
}
}
const mapStateToProps = state => {
return {
// authors: state.authors,
selectedItems: state.selectedItems,
table: state.table,
};
};
export default connect(
mapStateToProps,
)(AuthorsTable);