I am not getting any response on click that executes the addRow() function. What's wrong with my code?
...
constructor(props) {
super(props)
this.state = {
rowCount: 1
}
}
addRow = () => this.setState({ rowCount: this.state.rowCount + 1 })
renderRow = () => (
<div>
<Input type="text" />
<Button onClick={this.addRow}>+</Button>
</div>
)
render() {
const { type, value } = this.props
const { rowCount } = this
const i = 0
let rows = this.renderRow()
while (i < rowCount) {
rows = this.renderRow()
}
return rows
}
...
I know an easy workaround that uses lodash's time. Here, I am trying to implement it using vallina js.
addRow = () => {
this.setState(prevState => ({ rowCount: prevState.rowCount + 1 }));
}
render() {
const { rowCount } = this.state;
const renderRow = () => {
return Array(rowCount).fill(1).map((row, i) => (
<div key={i}>
<Input type="text" />
<Button onClick={this.addRow}>+</Button>
</div>
)
}
return renderRow();
}
Things to note here
Array(rowCount).fill(1).map((row, i) => {}) will initialize array if rowCount indexes e.g, 5 and fill each index with value of 1;
The other thing to notice here this.setState(prevState => ({ rowCount: prevState.rowCount + 1 })); is i take in the previous state of rowCount and add 1 to it to update the new state.
Changed the row as array to push each new element into an array and render and increment the i value in the loop for increment.
constructor(props) {
super(props);
this.state = {
rowCount: 1
};
}
addRow = () => this.setState({ rowCount: this.state.rowCount + 1 });
renderRow = () => (
<div>
<input type="text" />
<button onClick={this.addRow}>+</button>
</div>
);
render() {
const { type, value } = this.props;
const { rowCount } = this.state;
let i = 0;
let rows = [];
while (i < rowCount) {
rows.push(this.renderRow());
i++;
}
return <div>{rows}</div>;
}
You are replacing the same row over and over again. You should use an array instead e.g.
let i = 1;
let rows = [this.renderRow()];
while (i < rowCount) {
rows.push(this.renderRow());
i++;
}
return <div>rows</div>
and you need to increment your counter i with i++.
Related
I am working on solution
I have created basic tree kind of table whenever user click on expand data related to clicked row will appear under it based on row data
I have achieved basic functionality of expand/collapse upto N nested levels.
But i am stuck with only one problem, so basically all row have conditional expand button based on array having multiple values
Lets say it is split array having 3 entries county,city,state
Default loaded data will be fetched from api, now i have to check array that is there any split available! if yes than i make expand button visible
Consider this scenario
const split = ["country","city","state"]
this is Ui will look like
+ Data_1
+ Data_2
on click of button + new data table row will be rendered based on next split available in our case it is country so visual representation will be like
- Data_1
Country_1
Country_2
+ Data_2
Here country does not have expand button as user have not added next split yet, lets add city, and assume user have clicked Country_1 so data will be like
- Data_1
- Country_1
City_1
City_2
+ Country_2
+ Data_2
My solution works fine till this level now lets say user have removed country from split that all nodes of country and city should be removed and - icon of data_1 should be changed to +
Here is my code
import React, {useState, useEffect, useRef, Fragment} from "react";
import _ from "lodash";
import axios from "axios";
class TableRowData extends React.Component {
state = {
showIcon: false,
selection: [],
data: [],
splitOption: ["campid"]
};
constructor(props) {
super(props);
}
componentDidMount() {
const checkIfSplitExistOnMount = (currentSplit) => {
const i = _.findIndex(this.state.splitOption, function(el) {
return el === currentSplit;
});
if (this.state.splitOption[i + 1]) {
return this.state.splitOption[i + 1];
} else {
return null;
}
}
const getReportData = () => {
axios.get("https://jsonplaceholder.typicode.com/users?_start=0&_limit=1").then((res) => {
const rowData = res.data.map((row) => {
row.name = this.state.splitOption[0];
row.isExpanded = false;
row.currentSplit = this.state.splitOption[0];
row.nextSplit = checkIfSplitExistOnMount(this.state.splitOption[0])
row.parentId = 0;
row.isVisble = true;
//console.log(row)
return row;
});
this.setState({
data: rowData
}, () => { //console.log(this.state.data)
});
});
}
getReportData()
}
render() {
// update state function
const updateState = () => {
this.setState({
data: [...this.state.data],
splitOption: [...this.state.splitOption],
selection: [...this.state.selection],
}, () => {})
}
// recusively update parent and child
const recursion = (obj) => {
let row = obj;
row.isExpanded = row.isExpanded;
row.currentSplit = row.currentSplit;
row.nextSplit = checkIfSplitExist(row.currentSplit)
if (row.children && row.children.length > 0) { // check if has children
row.children.forEach(v => { // if has children do the same recursion for every children
recursion(v);
});
}
return row; // return final new object
}
const recursionDel = (obj,split) => {
var row = obj;
row.currentSplit = row.currentSplit;
row.nextSplit = checkIfSplitExist(row.currentSplit)
if (row.children && row.children.length > 0) { // check if has children
row.children.forEach(v => { // if has children do the same recursion for every children
recursionDel(v);
});
}
return row; // return final new object
}
// function to check if next split is there or not if there than return nextsplit
const checkIfSplitExist = (currentSplit) => {
const i = _.findIndex(this.state.splitOption, function(el) {
return el === currentSplit;
});
if(i !== -1) {
if (this.state.splitOption[i + 1]) {
return this.state.splitOption[i + 1];
} else {
return null;
}
}
}
// recursive update whenever split added
const recursiveUpdate = (data) => {
const prevData = [...data];
return prevData.map((row) => {
const updatedData = recursion(row);
return row;
});
}
// function to delete child and parent node recursively
const recursiveDelete = (data,split) => {
const prevData = [...data];
return prevData.map((row) => {
const data = recursionDel(row,split);
return row;
});
}
const addNewSplit = (split) => {
const i = _.findIndex(this.state.splitOption, function(el) {
return el === split;
});
if(i === -1) {
this.setState(
{
splitOption:[...this.state.splitOption,split]
},
()=>{
var rowData = recursiveUpdate(this.state.data)
this.setState({data:rowData})
}
);
} else {
const prevData = [...this.state.splitOption];
var index = prevData.indexOf(split);
prevData.splice(index,1)
if(index!==-1) {
this.setState(
{
splitOption:prevData
},
()=> {
var rowData = recursiveDelete(this.state.data,split)
this.setState({data:rowData})
}
)
}
}
}
// add lazyload expand data
const ExpandableTableRow = ({rows}) => {
const expandRow = (row) => {
row.children = [
{
id: "_" + Math.random().toString(36).substr(2, 5),
name: row.id + "_" + row.nextSplit,
isExpanded: false,
parentId: row.id,
currentSplit: row.nextSplit,
nextSplit: checkIfSplitExist(row.nextSplit),
isVisble:true
}, {
id: "_" + Math.random().toString(36).substr(2, 5),
name: row.id + "_" + row.nextSplit,
isExpanded: false,
parentId: row.id,
currentSplit: row.nextSplit,
nextSplit: checkIfSplitExist(row.nextSplit),
isVisble:true
}
];
row.isExpanded = true;
updateState();
};
// call whenever - click
const collapseRow = (row) => {
delete row.children;
row.isExpanded = false;
updateState();
};
// toggle
const ExpandCollapsToggle = ({row, expandRow, collapseRow}) => {
// display +/- only if nextsplit is not undefined or null
if (row.nextSplit) {
if (row.isExpanded === true) {
return (<button type="button" onClick={() => collapseRow(row)}>
-
</button>);
} else {
return (<button type="button" onClick={() => expandRow(row)}>
+
</button>);
}
} else {
return null;
}
};
if (rows) {
return rows.map((row) => {
// if(!_.isEmpty(row)) {
return (<Fragment key={row.id}>
<tr key={row.id}>
<td>
<ExpandCollapsToggle row={row} expandRow={expandRow} collapseRow={collapseRow}/>{" "}
{row.split}
- {row.id}
</td>
<td>{row.name}</td>
</tr>
<ExpandableTableRow rows={row.children}/>
</Fragment>);
// }
});
} else {
return null;
}
};
const splitData = this.state.splitOption.map((ob) => {
return (<Fragment key={ob}><span>{ob}</span> > </Fragment>)
})
if (this.state.data) {
return (
<Fragment>
{splitData} <br/>
<button onClick = {()=>addNewSplit("name")}>camp name</button>
<button onClick = {()=>addNewSplit("os")}>os</button>
<button onClick = {()=>addNewSplit("country")}>country</button>
<ExpandableTableRow rows={this.state.data} />
</Fragment>
);
} else {
return null;
}
}
}
export default TableRowData;
Also i have create example of codesandbox.io - Link
Here is how you play with ui to replicate scenario
First click on camp name, expand icon will appear
Now expand if you want to, you can see data according split under
Now add one more split OS or Country and you can see expand icon with 2nd level rows
Next step is to remove "Camp Name", Here is issue when camp name is removed, table should be re render according available splits, in our case user's all row should be removed and + icon must be there are we have next split os or country available, i used default split id, it will be there always
import React, { useState, useEffect, useRef, Fragment } from "react";
import axios from "axios";
const test_data = [{
"id":1,
"name":"Leanne Graham",
"username":"Bret",
"email":"Sincere#april.biz",
"address":{
"street":"Kulas Light",
"suite":"Apt. 556",
"city":"Gwenborough",
"zipcode":"92998-3874",
"geo":{
"lat":"-37.3159",
"lng":"81.1496"
}
},
"phone":"1-770-736-8031 x56442",
"website":"hildegard.org",
"company":{
"name":"Romaguera-Crona",
"catchPhrase":"Multi-layered client-server neural-net",
"bs":"harness real-time e-markets"
}
}];
class TableRowData extends React.Component {
constructor(props) {
super(props);
this.state = {
showIcon: false,
selection: [],
data: [],
splitOption: ["campid"]
};
}
// function to check if next split is there or not if there than return nextsplit
checkIfSplitExist = (currentSplit) => {
const i = this.state.splitOption.indexOf(currentSplit);
if (i > -1 && this.state.splitOption[i + 1]) {
return this.state.splitOption[i + 1];
}
return null;
}
getReportData = () => {
// axios.get("https://jsonplaceholder.typicode.com/users?_start=0&_limit=1").then(({data}) => {
this.setState({
data: test_data.map((row) => {
row.name = this.state.splitOption[0];
row.isExpanded = false;
row.currentSplit = this.state.splitOption[0];
row.nextSplit = this.checkIfSplitExist(this.state.splitOption[0])
row.parentId = 0;
row.isVisble = true;
console.log(row)
return row;
})
});
// });
}
componentDidMount() {
this.getReportData()
}
render() {
// update state function
const updateState = () => {
this.setState({
data: [...this.state.data],
splitOption: [...this.state.splitOption],
selection: [...this.state.selection],
}, () => { })
}
const recursionUpdateAndDeleteRow = (parentRow, childRow, split, index = 0) => {
childRow.children && childRow.children.forEach((r) => {
recursionUpdateAndDeleteRow(childRow, r, split, index + 1);
});
if (parentRow && split.indexOf(childRow.currentSplit) == -1) {
delete parentRow.children;
}
childRow.currentSplit = split[index];
childRow.nextSplit = split[index + 1] || null;
if (!childRow.children) {
childRow.isExpanded = false;
}
}
const recursionUpdateAndDeleteRows = (rows, split) => {
const _copy = [...rows];
_copy.forEach((row) => {
recursionUpdateAndDeleteRow(null, row, split);
});
return _copy;
}
const toggleSplit = (split) => {
const index = this.state.splitOption.indexOf(split);
let currentSplitOptions = [...this.state.splitOption];
if (index > -1) {
currentSplitOptions.splice(index, 1)
}
else {
currentSplitOptions.push(split);
}
const _data = recursionUpdateAndDeleteRows(this.state.data, currentSplitOptions);
this.setState({
splitOption: currentSplitOptions,
data: _data
})
}
// add lazyload expand data
const ExpandableTableRow = ({ rows }) => {
const expandRow = (row) => {
row.children = [
{
id: "_" + Math.random().toString(36).substr(2, 5),
name: row.id + "_" + row.nextSplit,
isExpanded: false,
parentId: row.id,
currentSplit: row.nextSplit,
nextSplit: this.checkIfSplitExist(row.nextSplit),
isVisble: true
}, {
id: "_" + Math.random().toString(36).substr(2, 5),
name: row.id + "_" + row.nextSplit,
isExpanded: false,
parentId: row.id,
currentSplit: row.nextSplit,
nextSplit: this.checkIfSplitExist(row.nextSplit),
isVisble: true
}
];
row.isExpanded = true;
updateState();
};
// call whenever - click
const collapseRow = (row) => {
delete row.children;
row.isExpanded = false;
updateState();
};
// toggle
const ExpandCollapsToggle = ({ row }) => {
// display +/- only if nextsplit is not undefined or null
if (row.nextSplit) {
if (row.isExpanded) {
return (
<button type="button" onClick={() => collapseRow(row)}>
-
</button>
);
}
return (
<button type="button" onClick={() => expandRow(row)}>
+
</button>
);
}
return null;
};
if (rows) {
return rows.map((row) => {
return (
<Fragment key={row.id}>
<tr key={row.id}>
<td>
<ExpandCollapsToggle
row={row}
/>
{" "}{row.split} - {row.id}
</td>
<td>{row.name}</td>
</tr>
<ExpandableTableRow rows={row.children} />
</Fragment>
);
});
} else {
return null;
}
};
if (this.state.data) {
return (
<Fragment>
{this.state.splitOption.join(', ')} <br />
<button onClick={() => toggleSplit("name")}>
camp name
</button>
<button onClick={() => toggleSplit("os")}>os</button>
<button onClick={() => toggleSplit("country")}>country</button>
<br />
<ExpandableTableRow rows={this.state.data} />
</Fragment>
);
} else {
return null;
}
}
}
export default function App() {
return (
<div>
<TableRowData />
</div>
);
}
Here working example
Array not getting cleared to null or empty in setState on click in react.
When I click on the submit button, the array must be set to []. It is setting to [], but on change the previous array of items comes into the array.
let questions = [];
let qns = [];
class App extends Component {
constructor(props) {
super(props);
this.state = {
btnDisabled: true,
//questions: [],
};
}
changeRadioHandler = (event, j) => {
this.setState({ checked: true });
const qn = event.target.name;
const id = event.target.value;
let idVal = this.props.dat.mat.opts;
let text = this.props.dat.mat.opt;
let userAnswer = [];
for (let j = 0; j < text.length; j++) {
userAnswer.push(false);
}
const option = text.map((t, index) => ({
text: t.text,
userAnswer: userAnswer[index],
}));
const elIndex = option.findIndex((element) => element.text === id);
const options = { ...option };
options[elIndex] = {
...options[elIndex],
userAnswer: true,
};
const question = {
options,
id: event.target.value,
qn,
};
questions[j] = options;
qns = questions.filter((e) => {
return e != null;
});
console.log(qns, qns.length);
this.setState({ qns });
if (qns.length === idVal.length) {
this.setState({
btnDisabled: false,
});
}
};
submitHandler = () => {
console.log(this.state.qns, this.state.questions);
this.setState({ qns: [] }, () =>
console.log(this.state.qns, this.state.questions)
);
};
render() {
return (
<div class="matrix-bd">
{this.props.dat.mat && (
<div class="grid">
{this.props.dat.mat.opts.map((questions, j) => {
return (
<div class="rows" key={j}>
<div class="cell main">{questions.text}</div>
{this.props.dat.mat.opt.map((element, i) => {
return (
<div class="cell" key={i}>
<input
type="radio"
id={j + i}
name={questions.text}
value={element.text}
onChange={(event) =>
this.changeRadioHandler(event, j)
}
></input>
<label htmlFor={j + i}>{element.text}</label>
</div>
);
})}
</div>
);
})}
</div>
)}
<div>
<button
type="button"
class="btn btn-primary"
disabled={this.state.btnDisabled}
onClick={this.submitHandler}
>
SUBMIT
</button>
</div>
</div>
);
}
}
export default App;
On button click submit, the array must be set to [] and when on change, the value must be set to the emptied array with respect to its index.
changeRadioHandler = (event, j) => {
// the better way is use local variable
let questions = [];
let qns = [];
...
}
submitHandler = () => {
console.log(this.state.qns, this.state.questions);
this.setState({ qns: [] }, () =>
console.log(this.state.qns, this.state.questions)
)}
// clear the previous `qns`
// if u use local variable. you don't need those lines
// this.qns = []
// this.questions = []
}
Finally, found out the solution.
After adding componentDidMount and setting questions variable to null solved my issue.
componentDidMount = () => {
questions = [];
};
Thanks all for your efforts and responses!
I have 3 counter buttons but I want a separate button that will onClick increment all the counters by 1. What is the best way to implement it and to have the state change all of the counters at once? I tried adding a countAll and combining all the counts but the syntax seemed off and I am not sure how to do it.
import React, { Component } from 'react';
import Button from './components/Button';
class App extends Component {
constructor(props) {
super(props);
this.state = { counter1: 0, counter2: 0, counter3: 0 };
}
incrementCount1() {
this.setState(prevState => ({ counter1: prevState.counter1 + 1 }));
}
incrementCount2() {
this.setState(prevState => ({ counter2: prevState.counter2 + 1 }));
}
incrementCount3() {
this.setState(prevState => ({ counter3: prevState.counter3 + 1 }));
}
decrementCount1() {
this.setState(prevState => ({ counter1: prevState.counter1 - 1 }));
}
decrementCount2() {
this.setState(prevState => ({ counter2: prevState.counter2 - 1 }));
}
decrementCount3() {
this.setState(prevState => ({ counter3: prevState.counter3 - 1 }));
}
render() {
let { counter1, counter2, counter3 } = this.state
return (
<div className="App">
<h2>Count: { counter1 }</h2>
<Button title = { "+" } task = { () => this.incrementCount1(counter1) } />
<Button title = { "-" } task = { () => this.decrementCount1(counter1) } />
<h2>Count: { counter2 }</h2>
<Button title = { "+" } task = { () => this.incrementCount2(counter2) } />
<Button title = { "-" } task = { () => this.decrementCount2(counter2) } />
<h2>Count: { counter3 }</h2>
<Button title = { "+" } task = { () => this.incrementCount3(counter3) } />
<Button title = { "-" } task = { () => this.decrementCount3(counter3) } />
</div>
);
}
}
export default App;
Sample using bracket notation and public class fields syntax
countOperation = (field, diff) => () => {
this.setState(prevState => ({ [field]: prevState[field] + diff }));
};
<button title={"+"} onClick={this.countOperation("counter1", 1)} />
<button title={"-"} onClick={this.countOperation("counter1", -1)} />
Addition
If you like, you can make one step further to package the set of buttons to a common HOC which can return id on certain callback.
In this way, you won't need to bind the index/key for each of your elements multiple times if there are multiple callbacks.
countOperation = diff => (e, id) => {
this.setState(prevState => ({ [id]: prevState[id] + diff }));
};
<CustomButton
id="counter1"
title={"+"}
onClick={this.countOperation(1)}
/>
class CustomButton extends React.Component {
render() {
const { id, title, onClick } = this.props;
return <button title={title} onClick={e => onClick(e, id)} />;
}
}
I really like #keikai's solution for code reduction/DRY-principal, but if you didn't want to change your existing state shape, AND if your existing state is only counters, then this would do the trick by operating over the state as an object.
Takes the state object, converts to array of entries, and reduces them back to an object that represents the next state with all counters incremented by the incrementBy amount.
incrementAll(incrementBy = 0) {
this.setState(prevState =>
Object.entries(prevState).reduce((counters, [counterKey, count]) => {
counters[counterKey] = count + incrementBy;
return counters;
}, {})
);
}
Usage
<Button title = { "+ all" } task = { () => this.incrementAll(1) } />
<Button title = { "- all" } task = { () => this.incrementAll(-1) } />
I am updating properties of a state element inside of map
computePiePercentages(){
var denominator = 1600
if (this.state.total < 1600){
denominator = this.state.total
}
return this.state.pieChartData.map((item, index) => {
return {
...item,
y: Number((item.y / denominator).toFixed(1)) * 100
}
})
}
However, when I display the chart using pieChartData - y hasn't updated. I checked my math to make sure I am setting to the correct value inside computePiePercentages
Is the map function asynchronous like setState? How can I make sure to wait for the update to happen before I display my results?
Here is the rest of relevant code:
class Budget extends React.Component {
computePiePercentages(){
var denominator = 1600
if (this.state.total < 1600){
denominator = this.state.total
}
return this.state.pieChartData.map((item, index) => {
return {
...item,
y: Number((item.y / denominator).toFixed(1)) * 100
}
})
}
computeTotals(){
var runningTotal = 0
var pieArray = []
var beyondBudget = {}
Object.entries(this.state.data.selectedQuestions).map((element, j) => {
console.log("hi here")
console.log(element)
//return selectedQuestions.map((val, j) => {
const value = Object.values(element[1])[0]
const name = element[0]
runningTotal += value
if(runningTotal <= 1600){
let pieSlice =
{
x: name,
y: value
};
pieArray = pieArray.concat(pieSlice)
}
else {
if (Object.keys(beyondBudget).length == 0) {
beyondBudget[name] = {};
beyondBudget[name] = runningTotal - 1600;
let pieSlice =
{
x: name,
y: value - (beyondBudget[name])
};
pieArray = pieArray.concat(pieSlice)
}
if (!beyondBudget[name]) {
beyondBudget[name] = {};
}
if (Object.keys(beyondBudget).length > 1) {
beyondBudget[name] = value;
}
}
});
this.setState({
pieChartData: pieArray,
total: runningTotal,
beyondBudget: beyondBudget,
}, () => {
this.computePiePercentages();
});
}
render() {
const {
data,
pieChartData,
beyondBudget,
showResults,
total
} = this.state;
const questions = data.questions;
return (
<div>
{questions.map((q, i) => (
<UL key={i}>
<li>
<h4>{q.text}</h4>
</li>
<li>
<Options
state={this.state}
q={q}
i={i}
handler={this.handleInputChange}
/>
</li>
</UL>
))}
<button onClick={(event) => {
this.computeTotals();
this._showResults(true);
}}>Click</button>
{console.log(this.state.showResults)}
{this.state.showResults &&
(<div>
<VictoryPie
colorScale="blue"
data={pieChartData}
labels={d => `${d.x}: ${d.y}%`}
style={{ parent: { maxWidth: '50%' } }}
/>
{Object.keys(beyondBudget).length > 0 && (
<div>
<Table>
<tbody>
<tr>
<th>Out of Budget</th>
</tr>
<BrokeBudget
beyondBudget={beyondBudget}
/>
</tbody>
</Table>
</div>
)}
</div>
)
}
</div>
);
}
}
As others have mentioned, an array's .map() function returns a new array without changing the old array. So this.computePiePercentages() as it currently stands, creates a new array based on this.state.pieChartData and returns that new array. This action does not change this.state.pieChartData.
You're calling this.computePiePercentages() from the callback function of this.setState(). This is just a function, it has no special properties other than that it's called when the setState() is done changing the state. So to update the state further inside computePiePercentages() you need to call setState() again.
There are two options:
Update the state in the callback function, using the return value of this.computePiePercentages:
this.setState({
pieChartData: pieArray,
total: runningTotal,
beyondBudget: beyondBudget,
}, () => {
this.setState({
pieChartData: this.computePiePercentages()
});
});
Update the state in this.computePiePercentages:
this.setState({
pieChartData: this.state.pieChartData.map((item, index) => {
return {
...item,
y: Number((item.y / denominator).toFixed(1)) * 100
}
})
});
I have been trying to get my dynamic form to work but I was wondering what the best practice is to save data generated like this.
My solution works but I have the feeling there is a better way of doing it.
At the moment I am saving both of the values of the input fields in a seperate array. But actually they belong together, so I have a link value and a content value that I need to save.
Later I need to map over these values to create new elements with the stored value.
The problem I have now is that I don't know how to map over two arrays at the same time. I am also wondering if it's not better to just create one Object with all of these values instead and then just map over that.
Hope someone can help me out.
This is my code:
class MediaInput extends React.Component {
render() {
const linkName = `link${this.props.index}`;
const contentName = `content${this.props.index}`;
return (
<div>
<ControlLabel>Media (optional)</ControlLabel>
<input
onChange={(event) => this.props.handleChangeUrl(event, this.props.index)}
name={ linkName }
value={ this.props.mediaUrls[this.props.index]}
className="form-control"
placeholder="Add your media url. We accept YouTube, Vimeo and SoundCloud links"
type="text"
/>
<input
name={ contentName }
onChange={(event) => this.props.handleChangeContent(event, this.props.index)}
value={ this.props.mediaContents[this.props.index]}
className="form-control"
placeholder="Add your media content"
type="text"
/>
</div>
);
}
}
export default class AddSparkShanghai extends Component {
constructor(props) {
super(props);
this.createSpark = this.createSpark.bind(this);
this.onChange = this.onChange.bind(this);
this.handleChangeUrl = this.handleChangeUrl.bind(this);
this.handleChangeContent = this.handleChangeContent.bind(this);
this.state ={
mediaFields: [],
content: [],
mediaUrls: [ null, null, null ],
mediaContents: [ {'', '', ''],
};
}
[...]
// Add/remove media fields
add() {
event.preventDefault();
const mediaFields = this.state.mediaFields.concat(MediaInput);
if (i < 3) {
this.setState({ mediaFields });
i++
} else {
Bert.alert('Only 3 media links are allowed', 'danger');
}
}
remove() {
event.preventDefault();
const lastElement = this.state.mediaFields.pop();
const mediaFields = this.state.mediaFields;
this.setState({ mediaFields });
i--
}
// Handle change media fields
handleChangeUrl(e, index) {
// Shallow copy of array
const mediaUrls = this.state.mediaUrls.slice();
let url = e.target.value
if (!/^https?:\/\//i.test(url)) {
url = 'http://' + url;
}
mediaUrls[index] = url;
this.setState({ mediaUrls});
}
handleChangeContent(e, index) {
// Shallow copy of array
const mediaContents = this.state.mediaContents.slice();
mediaContents[index] = e.target.value;
this.setState({ mediaContents });
}
[...]
const mediaFields = this.state.mediaFields.map((Element, index) => {
return <Element key={ index } index={ index } mediaUrls={this.state.mediaUrls} mediaContents={this.state.mediaContents} handleChangeUrl={this.handleChangeUrl} handleChangeContent={this.handleChangeContent} />
})
[...]
<div>
{ mediaFields }
<Button onClick={ () => this.add() }>Add media field</Button>
<Button onClick={ () => this.remove() }>Remove media field</Button>
</div>
Untested code, but it should work if you change the following:
Change this:
this.state ={
mediaFields: [],
content: [],
mediaUrls: [ null, null, null ],
mediaContents: [ {'', '', ''],
};
To:
this.state ={
mediaFields: [],
content: [],
data: [],
};
And change:
handleChangeUrl(e, index) {
// Shallow copy of array
const mediaUrls = this.state.mediaUrls.slice();
let url = e.target.value
if (!/^https?:\/\//i.test(url)) {
url = 'http://' + url;
}
mediaUrls[index] = url;
this.setState({ mediaUrls});
}
To:
handleChangeUrl(e, index) {
// Shallow copy of array
const tempData = this.state.data.slice();
let url = e.target.value
if (!/^https?:\/\//i.test(url)) {
url = 'http://' + url;
}
tempData[index].link = url;
this.setState({ tempData });
}
And change:
handleChangeContent(e, index) {
// Shallow copy of array
const mediaContents = this.state.mediaContents.slice();
mediaContents[index] = e.target.value;
this.setState({ mediaContents });
}
To:
handleChangeContent(e, index) {
// Shallow copy of array
const tempData = this.state.data.slice();
tempData[index].content = e.target.value;
this.setState({ tempData });
}
And lastly:
add() {
event.preventDefault();
const mediaFields = this.state.mediaFields.concat(MediaInput);
if (i < 3) {
this.setState({ mediaFields });
i++
} else {
Bert.alert('Only 3 media links are allowed', 'danger');
}
}
remove() {
event.preventDefault();
const lastElement = this.state.mediaFields.pop();
const mediaFields = this.state.mediaFields;
this.setState({ mediaFields });
i--;
}
To:
add() {
event.preventDefault();
const mediaFields = this.state.mediaFields.concat(MediaInput);
const data = this.state.data.slice();
data.push({ link: "", content: "" });
if (i < 3) {
this.setState({ data, mediaFields });
i++
} else {
Bert.alert('Only 3 media links are allowed', 'danger');
}
}
remove() {
event.preventDefault();
const lastElement = this.state.mediaFields.pop();
const mediaFields = this.state.mediaFields;
const data = this.state.data.slice();
data.pop();
this.setState({ data, mediaFields });
i--;
}
NOTE: Has been edited to fix the last lot of changes!
With the help of JosephGarrone I was able to get this example working like I want!
Here is the full code:
class MediaInput extends React.Component {
render() {
const linkName = `link${this.props.index}`;
const contentName = `content${this.props.index}`;
return (
<div>
<ControlLabel>Media (optional)</ControlLabel>
<input
onChange={(event) => this.props.handleChangeUrl(event, this.props.index)}
name={ linkName }
value={ this.props.mediaData[this.props.index].link}
className="form-control"
placeholder="Add your media url. We accept YouTube, Vimeo and SoundCloud links"
type="text"
/>
<input
name={ contentName }
onChange={(event) => this.props.handleChangeContent(event, this.props.index)}
value={ this.props.mediaData[this.props.index].content}
className="form-control"
placeholder="Add your media content"
type="text"
/>
</div>
);
}
}
export default class AddSparkShanghai extends Component {
constructor(props) {
super(props);
this.handleChangeUrl = this.handleChangeUrl.bind(this);
this.handleChangeContent = this.handleChangeContent.bind(this);
this.state ={
mediaFields: [],
mediaData: [],
};
}
[...]
// Add/remove media fields
add() {
event.preventDefault();
const mediaFields = this.state.mediaFields.concat(MediaInput);
const mediaData = this.state.mediaData.slice();
mediaData.push({ link: "", content: "" });
if (i < 3) {
this.setState({ mediaData, mediaFields });
i++
} else {
Bert.alert('Only 3 media links are allowed', 'danger');
}
}
remove() {
event.preventDefault();
const lastElement = this.state.mediaFields.pop();
const mediaFields = this.state.mediaFields;
const mediaData = this.state.mediaData.slice();
mediaData.pop();
this.setState({ mediaData, mediaFields });
i--;
}
// Handle change media fields
handleChangeUrl(e, index) {
// Shallow copy of array
const tempData = this.state.mediaData.slice();
let url = e.target.value
if (!/^https?:\/\//i.test(url)) {
url = 'http://' + url;
}
tempData[index].link = url;
this.setState({ mediaData: tempData });
console.log(this.state.mediaData)
}
handleChangeContent(e, index) {
// Shallow copy of array
const tempData = this.state.mediaData.slice();
tempData[index].content = e.target.value;
this.setState({ mediaData: tempData });
console.log(this.state.mediaData)
}
[...]
const mediaFields = this.state.mediaFields.map((Element, index) => {
return <Element key={ index } index={ index } mediaData={this.state.mediaData} handleChangeUrl={this.handleChangeUrl} handleChangeContent={this.handleChangeContent} />
})
[...]
<div>
{ mediaFields }
<Button onClick={ () => this.add() }>Add media field</Button>
<Button onClick={ () => this.remove() }>Remove media field</Button>
</div>