We Keep Coding

How can I include my existing table into my export function?

I am relatively new to React-JS and was wondering how I could pass my variables to my export function. I am using the jsPDF library.
At the time the Summary page is showing up, every thing is already in the database.
The Summary page creates in every round an IdeaTable component, writes it into an array and renders it bit by bit if the users click on the Next button (showNextTable()).
This component can use a JoinCode & playerID to assemble the table that was initiated by this player.
import React, { Component } from "react";
import { connect } from "react-redux";
import { Box, Button } from "grommet";
import IdeaTable from "../playerView/subPages/ideaComponents/IdeaTable";
import QuestionBox from "./QuestionBox";
import { FormUpload } from 'grommet-icons';
import jsPDF from 'jspdf';
export class Summary extends Component {
state = {
shownTable: 0
};
showSummary = () => {};
showNextTable = () => {
const { players } = this.props;
const { shownTable } = this.state;
this.setState({
shownTable: (shownTable + 1) % players.length
});
};
exportPDF = () => {
var doc = new jsPDF('p', 'pt');
doc.text(20,20, " Test string ");
doc.setFont('courier');
doc.setFontType('bold');
doc.save("generated.pdf");
};
render() {
const { topic, players } = this.props;
const { shownTable } = this.state;
const tables = [];
for (let i = 0; i < players.length; i++) {
const player = players[i];
const table = (
<Box pad={{ vertical: "large", horizontal: "medium" }}>
<IdeaTable authorID={player.id} />
</Box>
);
tables.push(table);
}
return (
<Box
style={{ wordWrap: "break-word" }}
direction="column"
gap="medium"
pad="small"
overflow={{ horizontal: "auto" }}
>
<QuestionBox question={topic} />
{tables[shownTable]}
<Button
primary
hoverIndicator="true"
style={{ width: "100%" }}
onClick={this.showNextTable}
label="Next"
/>
< br />
<Button
icon={ <FormUpload color="white"/> }
primary={true}
hoverIndicator="true"
style={{
width: "30%",
background: "red",
alignSelf: "center"
}}
onClick={this.exportPDF}
label="Export PDF"
/>
</Box>
);
}
}
const mapStateToProps = state => ({
topic: state.topicReducer.topic,
players: state.topicReducer.players
});
const mapDispatchToProps = null;
export default connect(mapStateToProps, mapDispatchToProps)(Summary);
So basically how could I include the IdeaTable to work with my pdf export?

If you want to use html module of jsPDF you'll need a reference to generated DOM node.
See Refs and the DOM on how to get those.
Alternatively, if you want to construct PDF yourself, you would use data (e.g. from state or props), not the component references.
Related side note:
On each render of the parent component you are creating new instances for all possible IdeaTable in a for loop, and all are the same, and most not used. Idiomatically, this would be better:
state = {
shownPlayer: 0
};
Instead of {tables[shownTable]} you would have:
<Box pad={{ vertical: "large", horizontal: "medium" }}>
<IdeaTable authorID={shownPlayer} ref={ideaTableRef}/>
</Box>
And you get rid of the for loop.
This way, in case you use html dom, you only have one reference to DOM to store.
In case you decide to use data to generate pdf on your own, you just use this.props.players[this.state.shownPlayer]
In case you want to generate pdf for all IdeaTables, even the ones not shown, than you can't use API that needs DOM. You can still use your players props to generate your own PDF, or you can consider something like React-Pdf

Pass onClick to material-ui button - works only once

I'm trying to wrap material-ui button into another component. Everything goes fine unless I've tried to handle onClick event. It seems that it works only once.
(not) Working example available at:
https://codesandbox.io/embed/material-demo-nn0ut?fontsize=14
Source code:
import React from "react";
import { useState } from "react";
import MaterialButton from "#material-ui/core/Button";
import { Component } from "react";
import { withStyles } from "#material-ui/core";
const stylesMain = {
root: {
fontSize: 16
}
};
const stylesSecondary = {
root: {
fontSize: 14
}
};
const StyledButtonMain = withStyles(stylesMain)(MaterialButton);
const StyledButtonSecondary = withStyles(stylesSecondary)(MaterialButton);
class Button extends Component {
constructor(props) {
super(props);
this.onClick = function() {};
this.href = null;
this.target = null;
this.type = "button";
if (props.onClick) {
this.onClick = props.onClick;
}
if (props.href) {
this.href = props.href;
}
if (props.target) {
this.target = props.target;
}
if (props.type) {
this.type = props.type;
}
}
render() {
const StyledButton =
this.props.color === "secondary"
? StyledButtonSecondary
: StyledButtonMain;
return (
<StyledButton
type={this.type}
href={this.href}
target={this.target}
onClick={this.onClick}
variant="contained"
style={{ whiteSpace: "nowrap" }}
>
{this.props.children}
</StyledButton>
);
}
}
export default function Counter(props) {
const [counter, setCounter] = useState(0);
return (
<div>
<h1>Counter: {counter}</h1>
<Button
onClick={() => {
setCounter(counter + 1);
}}
>
ClickMe
</Button>
</div>
);
}
I've expected, that onClick should work in the same manner as in "bare" material ui button. How can I fix that?

Your issue is that you're binding the onClick function in the Button constructor. As you may know, the constructor function is only called once, whenever an instance of the Button class is created.
In your case, you're basically binding the setCounter function with a fixed value of 1 right in the constructor and from that point on, you ignore the function values passed in the onClick prop.
To fix this, all you need to do is replace the following line in the Button render function:
onClick={this.onClick}
With this one:
onClick={this.props.onClick}

You are losing the value of onClick() between renders. On initial load it will set it based on the prop, but then the next time it renders it loses the value since you aren't loading it again.
You can just use the props directly like below and use ternary operators like I did for onClick for null checks if you want
class Button extends Component {
render() {
const StyledButton =
this.props.color === "secondary"
? StyledButtonSecondary
: StyledButtonMain;
return (
<StyledButton
type={this.props.type}
href={this.props.href}
target={this.props.target}
onClick={this.props.onClick ? this.props.onClick : () => {}}
variant="contained"
style={{ whiteSpace: "nowrap" }}
>
{this.props.children}
</StyledButton>
);
}
}

Sending custom props to custom component is failing

I have created a custom component which takes a color name from the parent component and updates that color in the state in the parent component. Currently, after I have done all the code, it does not save the new color, and therefore, does not update the the state.
This is for a react-native android app that I am building. I have looked at the ReactNative documentation for flatlist and textinput. I have looked at Stack overflow for solutions too
Set up a react native project. this is my parent component
class HomePage extends Component {
constructor(props) {
super(props);
this.state = {
backgroundColor: "blue",
availableColors: [
{name: 'red'}
]
}
this.changeColor = this.changeColor.bind(this)
this.newColor = this.newColor.bind(this)
}
changeColor(backgroundColor){
this.setState({
backgroundColor,
})
}
newColor(color){
const availableColors = [
...this.state.availableColors,
color
]
this.setState({
availableColors
})
}
renderHeader = ()=>{
return(
<ColorForm onNewColor={this.newColor} />
)
}
render() {
const { container, row, sample, text, button } = style
const { backgroundColor, availableColors } = this.state
return (
<View style={[container,{backgroundColor}, {flex: 1}]} >
<FlatList
data={availableColors}
renderItem={
({item}) =>
<ColorButton
backgroundColor={item.name}
onSelect={(color)=>{this.changeColor(color)}}>
{item.name}
</ColorButton>}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={this.renderHeader}
>
</FlatList>
</View>
);
}
}
this is the code for ColorForm component
class ColorForm extends Component {
constructor(props) {
super(props);
this.state = {
txtColor:'',
}
this.submit = this.submit.bind(this)
}
submit() {
this.props.onNewColor(this.state.txtColor.toLowerCase())
this.setState({
txtColor: 'yellow',
})
}
render() {
const {container, txtInput, button} = style
return (
<View style={container}>
<TextInput style={txtInput}
placeholder="Enter a color"
onChangeText={(txtColor)=>this.setState({txtColor})}
value={this.state.txtColor}></TextInput>
<Text
style={button}
onPress={this.submit}>Add</Text>
</View> );
}
}
and below is the code for ColorButton component
export default ({backgroundColor, onSelect=f=>f}) => {
const {button, row, sample, text} = style
return (
<TouchableHighlight onPress={()=>{onSelect(backgroundColor)}} underlayColor="orange" style={button}>
<View style={row}>
<View style={[sample,{backgroundColor}]}></View>
<Text style={text}>{backgroundColor}</Text>
</View>
</TouchableHighlight>
)
}
The imports and stylesheets are setup as standard and do not effect the code so I have chosen to not show them.
EDIT: Adding the expo snack here.
Expected Behavior:
When I press "ADD" on the ColorForm component, it should take that color and add that to the this.state.availableColor array and therefore visible in the ColorButton component. And when I touch the button, it should make that change
Current behaviour:
When I enter a color and press on add, it makes an empty button in the ColorButton component - NOT the color i entered in the color I entered in the ColorForm component.
EDIT: Adding the expo snack here.

Your state is updating but the FlatList is not updating. Because your data={availableColors} in flatlist is not changing but your state is changing .
Try to add extraData
A marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.
Try this
<FlatList
extraData={this.state.backgroundColor}
Updated Answer
the problem is in this function newColor(color)
const availableColors = [
...this.state.availableColors,
color
]
you just receive a string of color but you have defined object like this {name: 'red'}
please use this code
newColor(color){
const availableColors = [
...this.state.availableColors,
{name: color}
]
this.setState({
availableColors
})
}
Snack link with example : https://snack.expo.io/#mehran.khan/healthy-cake-state-sample
Also add export default to main component to remove error of launch
export default class HomePage extends Component {
App Preview

I had many problems using setState() in the way you are using now. I recommend you to use in this way setState(), with a callback:
this.setState((previousState, currentProps) => {
return { ...previousState, foo: currentProps.bar };
});
This is one of the article that talks about it.
setState() does not always immediately update the component. It may
batch or defer the update until later.
From react website setState().

React Component only updates once

Consider the following React Native code:
import React from 'react';
import {Text, View, StyleSheet, Button} from 'react-native';
export default class Target extends React.Component {
constructor(props){
super(props);
this.state ={ isLoading: true};
this.hitData = this.props.hitData;
}
componentDidMount(){
for(let i of Object.keys(this.hitData)){
if(this.hitData[i] === 0){
this.hitData[i] = '---'
}
}
this.setState({
prop1: this.hitData['prop1'],
prop2: this.hitData['prop2'],
prop3: this.hitData['prop3'],
prop4: this.hitData['prop4'],
prop5: this.hitData['prop5'],
isLoading: false
});
this.onPress = this.onPress.bind(this);
}
componentDidUpdate(prevProps) {
// console.log(prevProps)
if(this.props.hitData !== prevProps.hitData){
console.log("Component "+ this.state.mac + " got new props!");
this.hitData = this.props.hitData;
this.setState((state, props) =>{
let newState = {};
for(let i of Object.keys(props.hitData))
{
if(state[i] !== props.hitData[i])
{
console.log(i + " is different!");
newState[i] = props.hitData[i]
}
}
return newState
});
}
}
onPress(txt) {
console.log(txt);
}
render(){
return(
<View style={styles.container}>
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{borderWidth: 2.5, borderColor: '#00FF00',width: '50%'}}>
<Text style={{fontSize: 19, fontWeight: 'bold'}}>{this.state.prop1}</Text>
<Text style={{fontSize: 16}} numberOfLines={1}>{this.state.prop2}</Text>
</View>
<View>
<Text>{"Prop3: " + this.state.prop3}</Text>
<Text>{"Prop4: " + this.state.prop4}</Text>
<Text>{"Prop5: " + this.state.prop4}</Text>
</View>
</View>
<Button key={this.hitData[0]} title={"BUTTON"} onPress={() => this.onPress(this.hitData[0])}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 2.5,
height: 100,
marginBottom: 5,
overflow: 'hidden'
}
});
This is the code for a React Native component. The component takes in information received from an EventSource in the parent element. The aim is to update the fields containing Prop[3-5]based on data from future events.
In the parent component I have a property per item on state and am defining each element like:
const targetList = this.state.filterKeys.map((item) =>
<Target key={item} hitData={this.state[item]['lastHit']}/>
In my Event handler I can then do:
this.setState({
[id]: hitIntermediate
})
to send new props to each child component.
In my child component I do see the new props arriving, but after the first update the child stops updating. It does not matter how many events I send, after the first update has been received no further updates are displayed.
The strange part is if I query this.state in the child component, I do see that the state reflects the data from the new event, but the display does not change.
Am I completely misunderstanding something here. Essentially what I am wanting to do is to do the equivalent of setting .innerHTML on the <Text> tags containing the various pieces of data, but all my updates seem to get ignored after the first.

I was able to resolve this on my own.
As it turns out, the way I was getting events into my component was silly.
I changed it so instead of maintaining a hugely complex state out in the main component, I how just pass in the EventSource and define an eventhandler inside each child component.
Now I am seeing updates in close to real-time. I would still like to improve re-render performance a little bit, but overall the issue I was having is resolved.
Now a quick bonus question: why is it I seem to see (slightly) faster performance if I have the react-devtools running?

Unable to update state with Array of objects in RN

I have a blank array in the state object. The array will contain some objects with key-value pair.
Here is my code:
import * as React from 'react';
import { Text, ScrollView, View, StyleSheet, TouchableOpacity, TextInput, ListView, Switch, Button } from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
constructor(props){
super(props);
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
TodoTextVal: '',
todos: []
}
this.addTodo = this.addTodo.bind(this);
}
addTodo() {
id++;
let TodoTextVal = this.state.TodoTextVal;
//let arrVal = {id: id, text: TodoTextVal, checked: false}
//this.setState(prevState => ({todos : [...prevState.todos, arrVal]}));
this.setState({
todos: [
...this.state.todos,
{id: id, text: TodoTextVal, checked: false}
],
})
}
toggle(id) {
}
render() {
return (
<View style={styles.container}>
<View style={{flexDirection: "row"}}>
<TextInput
onChangeText={(TodoTextVal) => this.setState({TodoTextVal})}
ref= {(el) => { this.TodoTextVal = el; }}
style={[styles.input, {flex: 2} ]}
placeholder="Add Todo..."/>
<TouchableOpacity onPress={this.addTodo} title="+ Add" style={styles.button} >
<Text>Add</Text>
</TouchableOpacity>
</View>
<ListView
dataSource={this.ds.cloneWithRows(this.state.todos)}
renderRow={(data) => <View><Text>{data}</Text></View>} />
</View>
);
}
}
let id = 0
The problem here is this.setState() is not updating the state. I've tried both the method which you see in addTodo() that commented code too.
But both the methods are throwing an error with this message:
Device: (96:380) Invariant Violation: Objects are not valid as a React
child (found: object with keys {id, text, checked}).

First, stop using ListView. It's deprecated and second, update your renderRow method to render individual keys of the object instead of the complete object.

I think the problem is in:
renderRow={(data) => <View><Text>{data}</Text></View>}
Data is an object and you are trying to render it. JSX cannot render objects, instead select any key of data object to construct your html.