We Keep Coding

Send multiple props across components React

I am trying to send two variables from the Component 'Game' to the Component 'App' but I am unsure how to send more than one prop at a time.
This what I have:
//App Component
class App extends Component {
constructor(props) {
super(props)
this.state = {
score: 0,
}
this.changeScore = this.changeScore.bind(this)
}
changeScore(newScore) {
this.setState(prevState => ({
score: prevState.score + newScore
}))
}
render() {
return(
<div>
<Game onClick={this.changeScore}/>
<Score score={this.state.score}/>
</div>
)
}
}
//Game Componenet
class Game extends Component {
constructor(props) {
super(props)
this.state = {
score: 0,
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
console.log('Clicked')
this.props.onClick(this.state.score)
}
render() {
return(
<div>
<button onClick={this.handleClick}> Score Button </button>
</div>
)
}
}
//Score Component
class Score extends Component {
render() {
const score = this.props.score
return(
<div>
<h1>Score: {score}</h1>
</div>
)
}
}
With this I am able to send the prop 'score' from 'Game' to 'App' but I was wondering if it was possible to send more then just the one prop, such as 'score' and a new variable, 'count' with the same button press, to ultimately be able to display both 'score' and 'count' in the 'Score' Componenet.
Thanks.

Sure you can, just update the function you defined in the Parent App component to accept two arguments.
App.js
class App extends Component {
constructor(props) {
super(props)
this.state = {
score: 0,
count: 0
}
this.changeScore = this.changeScore.bind(this)
}
changeScore(newScore, count) {
this.setState(prevState => ({
score: prevState.score + newScore,
count: prevState.count + count
}))
}
render() {
return(
<div>
<Game
onClick={this.changeScore}
score={this.state.score}
count={this.state.count}
/>
<Score score={this.state.score} count={this.state.count}/>
</div>
)
}
}
Game.js //refactored since it doesnt need to use state
const Game = ({ onClick, count, score }) => {
const newScore = score + 10
const newCount = count + 1
return (
<button onClick={() => onClick(newScore, newCount)}>Score</button>
)
}

You can definitely send more than one prop at a time. Here's the example that you've described:
<Score
score={this.state.score}
count={this.state.count}
/>
And in your Score component:
class Score extends Component {
render() {
const score = this.props.score;
const count = this.props.count;
return(
<div>
<h1>Score: {score}</h1>
<h1>Count: {count}</h1>
</div>
)
}
}

Random number using React.js

I wrote this code, but when I run it, I only get a blank page. What is wrong?
It does seem that I am close to the answer. I've tried everything, but it is still not working.
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
random: 0
}
}
render() {
var min = 1;
var max = 100;
var rand = min + (Math.random() * (max-min));
handleClick() {
this.setState ({this.state.random + this.rand})
}
return (
<div>
<button value="Click me!" onClick={this.handleClick.bind(this)></button>
</div>
);
React.render(<Button />, document.querySelector('#container'));
}
}
JSFIDLLE: https://jsfiddle.net/1cban4oy/12/

Remove all your logic from the render function and add it to the click handler method. Also the onClick is missing a curly bracket at the end. Finally you're not indicating the state property you're updating in the setState() method.
This basically seems to do what you're after:
https://codesandbox.io/s/98n9EkEOJ
This is the code just in case:
import React from 'react';
import { render } from 'react-dom';
class Button extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = { random: 0 };
}
handleClick() {
const min = 1;
const max = 100;
const rand = min + Math.random() * (max - min);
this.setState({ random: this.state.random + rand });
}
render() {
return (
<div>
<button onClick={this.handleClick.bind(this)}>Click</button>
<div>The number is: {this.state.random}</div>
</div>
);
}
}
render(<Button />, document.getElementById('container'));

Firstly, you didn't set the state properly.
Secondly, use arrow functions so you can avoid problematic binding.
Thirdly, you didn't display the random value anywhere.
Lastly - you can move the min and max variables outside the render function. Also the whole math logic responsible for rolling a random number can be moved into the handleClick function.
Working code:
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
random: null,
}
}
min = 1;
max = 100;
handleClick = () => {
this.setState({random: this.min + (Math.random() * (this.max - this.min))});
};
render() {
return (
<div>
<button onClick={this.handleClick}>Click me</button>
{this.state.random}
</div>
);
}
}

Try this:
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
random: null
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
const min = 1;
const max = 100;
const random = min + (Math.random() * (max - min));
this.setState({ random })
}
render() {
return (
<div>
<button value="Click me!" onClick={this.handleClick}>{this.state.random}</button>
</div>
);
}
}
React.render(<Button />, document.querySelector('#container'));

i think you need move this line
React.render(<Button />, document.querySelector('#container'));
not only from render method but even from the class.
and you need to do some changes
so your code be like :
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
random: 0
}
}
handleClick = () => {
var min = 1;
var max = 100;
var rand = min + (Math.random() * (max-min));
this.setState ({this.state.random : rand})
}
render() {
return (
<div>
<button value="Click me!" onClick={this.handleClick}> {this.state.random} </button>
</div>
);
}
}
React.render(<Button />, document.querySelector('#container'));

There is an easy way to create Random Number using
random-string
var x = randomString({
length: 8,
numeric: true,
letters: false,
special: false,
});
Here is the documentation for more details
random-string

Random number in an Array in React:
[Math.floor(Math.random() * 20)]

import React, { useState } from "react";
const App = () => {
const [num, setNum] = useState(0);
function randomNumberInRange(min, max) {
// get number between min and max
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const handleClick = () => {
setNum(randomNumberInRange(1, 5));
};
return (
<div>
<h2>number is: {num}</h2>
<button onClick={handleClick}>Generate random number</button>
</div>
);
};
export default App;

Reactjs - how to move an element between components onClick of button

I'm currently new to learning Reactjs and I want to be able to move an element (say, just like a simple header between two components (that I've made as two simple boxes). I got caught up on how to implement the button, I figure I should implement that as its own component since it has important functionality. The point I reached up to is below:
/*class MoveButton extends React.Component {
handleClick() {
alert("Button clicked");
}
render() {
return (
<button onClick={handleClick}>
Click To Move
</button>
);
}
} */
class BoxOne extends React.Component {
render() {
return (
<div className="boxOne-container">
</div>
);
}
}
class BoxTwo extends React.Component {
render() {
return (
<div className="boxTwo-container">
</div>
);
}
}
function App() {
return (
<div>
<BoxOne />
<BoxTwo />
</div>
);
}
ReactDOM.render(<App />,document.getElementById('container'));

here is a sample of a 'moving button'
class MoveButton extends React.Component {
render() {
return (
<button onClick={this.props.onClick}>
Click To Move
</button>
);
}
}
class BoxOne extends React.Component {
render() {
return (
<div className="boxOne-container">
Box1
</div>
);
}
}
class BoxTwo extends React.Component {
render() {
return (
<div className="boxTwo-container">
Box2
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = { pos: 0 }
}
onClick() {
this.setState({ pos: (this.state.pos + 1) % 3 })
}
render () {
return (
<div>
{ this.state.pos === 0 ? <MoveButton onClick={this.onClick.bind(this)}/> : ''}
<BoxOne />
{ this.state.pos === 1 ? <MoveButton onClick={this.onClick.bind(this)}/> : ''}
<BoxTwo />
{ this.state.pos === 2 ? <MoveButton onClick={this.onClick.bind(this)}/> : ''}
</div>
);
}
}
function App() {
return (
<App />
);
}
ReactDOM.render(<App />,document.getElementById('container'));

React js state management

class Todo extends React.Component {
constructor(props) {
super(props);
this.state = {
saveText: '',
}
this.handleSaveText = this.handleSaveText.bind(this);
this.displayText = this.displayText.bind(this);
}
handleSaveText(saveText) {
this.setState({
saveText: saveText
})
}
render() {
return (
<div>
<Save saveText = {this.state.saveText}
onSaveTextChange = {this.handleSaveText}
/>
<Display saveText = {this.state.saveText}
/> </div>
);
}
}
class Save extends React.Component {
constructor(props) {
super(props);
this.handleSaveText = this.handleSaveText.bind(this);
}
handleSaveText(e) {
this.props.onSaveTextChange(e.target.value);
}
render() {
return ( <div>
<input type = "text"
value = {
this.props.saveText
}
onChange = {
this.handleSaveText
}
/> <input type = "button"
value = "save"
onClick = {
this.displayText
}
/> </div>
);
}
}
class Display extends React.Component {
render() {
var todos = [];
var todo = this.props.saveText;
//todos.push(todo);
return ( <div> {
todos
} </div>
);
}
}
ReactDOM.render( <Todo / > ,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
I am new to react still trying to figure out how state works.I am trying to implement a simple todo app which takes in an input and displays an output on the screen after click of a button.
According to the minimal UI representation I broke the UI into two parts, the first contains the Save class which has an input box and a button. The second contains a display class which will display the contents of the input box.
I am storing the value of input box in state.
How can I pass that state into Display class and display the values on the screen?
Codepen Link

This will do it:
class Todo extends React.Component {
constructor(props) {
super(props);
this.state = {
saveText: '',
displayText: []
}
this.handleSaveText = this.handleSaveText.bind(this);
this.displayText = this.displayText.bind(this);
}
handleSaveText(saveText) {
this.setState({
saveText: saveText
})
}
displayText(text) {
let newDisplay = this.state.displayText;
newDisplay.push(text);
this.setState({displayText: newDisplay});
}
render() {
return (
<div>
<Save saveText = {this.state.saveText}
onSaveTextChange = {this.handleSaveText}
displayText={this.displayText}
/>
<Display displayText = {this.state.displayText}
/> </div>
);
}
}
class Save extends React.Component {
constructor(props) {
super(props);
this.handleSaveText = this.handleSaveText.bind(this);
this.displayText = this.displayText.bind(this);
}
handleSaveText(e) {
this.props.onSaveTextChange(e.target.value);
}
displayText() {
this.props.displayText(this.props.saveText);
}
render() {
return ( <div>
<input type = "text"
value = {
this.props.saveText
}
onChange = {
this.handleSaveText
}
/> <input type = "button"
value = "save"
onClick = {
this.displayText
}
/> </div>
);
}
}
class Display extends React.Component {
render() {
return ( <div> {
this.props.displayText
} </div>
);
}
}
ReactDOM.render( <Todo / > ,
document.getElementById('root')
)
You can't push to the array in the render method because that won't exist anymore after it re-renders when it receives new props from you clicking the button again. My method saves an array of previous responses as "displayText" and sends that to the display component. Note that this method will display the entire array as a single line with no spaces. In practice you'll want to map it by doing this:
this.props.displayText.map((text, idx) => (<div key={idx}>{text}</div>));

Here is working example of todo list.
class Todo extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '',
list: []
}
// this.handleSaveText = this.handleSaveText.bind(this);
this.addTodo = this.addTodo.bind(this);
}
handleSaveText(text) {
this.setState({
text: text
})
}
addTodo(saveText) {
var list = this.state.list;
list.push(saveText);
this.setState({
list: list
});
// to save to localstorage, uncomment below line
// window.localStorage.setItem('todos', list);
}
render() {
return ( <
div >
<
Save text = {
this.state.text
}
onClick = {
this.addTodo
}
/> <
Display list = {
this.state.list
}
/> < /
div >
);
}
}
class Save extends React.Component {
constructor(props) {
super(props);
this.state = {
input: this.props.text || '',
}
this.onChange = this.onChange.bind(this);
this.addToTodo = this.addToTodo.bind(this);
}
onChange(e) {
this.setState({
input: e.target.value
});
}
addToTodo() {
this.props.onClick(this.state.input);
this.setState({
input: ''
});
}
render() {
return ( < div >
<
input type = "text"
value = {
this.state.input
}
onChange = {
this.onChange
}
/> <input type = "button"
value = "save"
onClick = {
this.addToTodo
}
/> </div >
);
}
}
class Display extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: []
}
}
componentWillReceiveProps(nextProps) {
this.setState({
todos: nextProps.list
});
}
render() {
var i = 1;
var renderList = this.state.todos.map((name) => {
return <div key = {
i++
} > {
name
} < /div>;
});
return ( < div > {
renderList
} < /div>);
}
}
ReactDOM.render( < Todo / > ,
document.getElementById('root')
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My React Project on CodePen</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/4.1.0/sanitize.css">
<link rel="stylesheet" href="css/style.processed.css">
</head>
<body>
<div id="root"></div>
<script src="https://npmcdn.com/react#15.3.0/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.min.js"></script>
</body>
</html>
If you are trying create a todo list, you can tweak a little bit by adding array list in the main TODO component, and it down to display component.
save component you just have to handle the input change and on click function.
simple enough.

You must use:
componentWillReceiveProps(nextProps)
in your Display Component.
This is a working example:
class Todo extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: []
}
this.handleSaveText = this.handleSaveText.bind(this);
}
handleSaveText(saveText) {
let todos = this.state.todos;
todos.push(saveText);
this.setState({
todos: todos
});
}
render() {
return (
<div>
<Save
onSaveTextClick = {this.handleSaveText}
/>
<Display todos = {this.state.todos}
/> </div>
);
}
}
class Save extends React.Component {
constructor(props) {
super(props);
this.state = {
saveText: ''
}
this.handleSaveText = this.handleSaveText.bind(this);
this.handleChangeText = this.handleChangeText.bind(this);
}
handleChangeText(e){
this.setState({saveText: e.target.value});
}
handleSaveText(e) {
this.props.onSaveTextClick(this.state.saveText);
}
render() {
return ( <div>
<input type = "text"
onChange = {
this.handleChangeText
}
/> <input type = "button"
value = "save"
onClick = {
this.handleSaveText
}
/> </div>
);
}
}
class Display extends React.Component {
constructor(props){
super(props);
this.state = {
todos: []
}
}
componentWillReceiveProps(nextProps){
this.setState({todos: nextProps.todos});
}
render() {
let todos = this.state.todos.map((todo)=>{return <div>{todo}</div>});
return ( <div> {
todos
} </div>
);
}
}
ReactDOM.render( <Todo / > ,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Rendering of react components in unexpected way

I am new to react. I am trying to create a simple todolist using store2.js library. There is a problem in rendering the elements in that to do list.
var React = require('react');
var store = require("store2");
import {Button} from "react-bootstrap";
class CreateToDoList extends React.Component {
componentDidMount() {
this.inputVal="";
}
constructor() {
super();
this.addValueToList = this.addValueToList.bind(this);
this.handleInput=this.handleInput.bind(this);
};
handleInput(e)
{
this.inputValue=e.target.value;
}
addValueToList(){
if(store.has("todoList")===false)
{
store.set("todoList",{count:0})
}
var count=store.get("todoList").count;
count+=1;
var obj={
value:this.inputValue,
isChecked:false
};
store.transact("todoList",function(elements){
elements[count+""]=obj;
elements.count=count
});console.log(store.getAll("todoList"));debugger;
}
render() {
return ( <div>
<input type="input" onChange={this.handleInput}/>
<Button bsStyle="primary" onClick={this.addValueToList}>Add</Button>
<CreateShowPreviousTasks/>
</div>
)
}
}
class todoValues extends React.Component{
componentDidMount(){
this.handleClick=this.handleClick.bind(this);
}
handleClick(){
}
render(){
console.log(this.props)
return(
<div >
<input type="checkbox" checked={this.props.isCheck}></input>
<input type="input">{this.prop.value}</input>
</div>
)
}
}
class CreateShowPreviousTasks extends React.Component {
componentDidMount() {
console.log("here")
}
constructor(){
super();
this.handleClick=this.handleClick.bind(this);
}
handleClick(event)
{
}
render() {
if (store.has('todoList') !== undefined) {
var divElements=[];
this.loop=0;
var count=store.get("todoList").count;
for(this.loop=0;this.loop<count;this.loop++)
{
var obj=store.get("todoList");
obj=obj[count+""];
divElements.push(
<todoValues value={obj.value} key={this.loop+1}/>
)
}
} else {
store.set('todoList',{
count:0
})
}
return (<div>{divElements}</div>
)
}
}
export default CreateToDoList;
The class todoValues adds the div elements of two input buttons wrapped in a div. But the rendering is only done as <todovalues value="as"></todovalues>.
The class CreateShowPreviousTasks which retrieves the list of stored items in the local storage items and passing those values as properties to todoValues and wrapping as in a div.

use the folliwng syntax to render a list
render() {
let todos = store.get("todolist");
return (
<div>
{
Object.keys(todos).map(function(key){
let todo = todos[key];
return (<todoValues value={ todo.value } key={ key }/>)
})
}
</div>
}
Does this answer your question?