React onchange function on slider to an html img - javascript

Im trying to change the style whenever ReactSlider is changed. I want to add for example brightness when slider is increased in React. I did it but I cannot seem to get the styles to be added to the image whenever the slider goes through the onchange event. Here is the code:
import React, { Component } from 'react';
import { BsFileEarmarkPlus } from 'react-icons/bs';
import ReactSlider from 'react-slider';
class Edit extends React.Component {
constructor(props) {
super(props);
this.state = {
file: null,
}
this.ImageUpload = this.ImageUpload.bind(this);
this.ChangeImage = this.ChangeImage.bind(this);
}
ImageUpload(event) {
console.log(event.target.files[0]);
this.setState({
file: URL.createObjectURL(event.target.files[0]),
});
}
ChangeImage(props) {
console.log(props);
var amount = this.props + '%';
var imgStyles = {
filter: 'brightness(' + amount + ')'
}
}
render() {
return (
<div className="editor">
<h1>Editor</h1>
<label htmlFor="fileChoose"><BsFileEarmarkPlus />Upload
<input type="file" id="fileChoose" onChange={this.ImageUpload} />
</label>
<hr />
<div className="img-surround">
<img
src={this.state.file}
id="img"
style={imgStyles} />
</div>
<div className="edit-nav">
<ReactSlider
className="horizontal-slider"
defaultValue={0}
max={100}
min={-100}
thumbClassName="example-thumb"
trackClassName="example-track"
renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
onChange={this.ChangeImage}
/>
</div>
</div>
);
}
}
export default Edit;
The only problem is imgStyles is undefined when called from outside the render(). Everything else works.

Because you defined 'imgStyles' variable in 'ChangeImage' function.
You should define this variable out of class or define it as state variable.
var imgStyles = {};
class Edit extends React.Component {
...
ChangeImage(props) {
console.log(props);
var amount = this.props + '%';
imgStyles = {
filter: 'brightness(' + amount + ')'
}
}
...
Or
...
constructor(props) {
super(props);
this.state = {
file: null,
imgStyles: {}
}
}
...
ChangeImage(props) {
console.log(props);
var amount = this.props + '%';
this.setState({ imgStyles: { filter: 'brightness(' + amount + ')' } });
}
...
<img
src={this.state.file}
id="img"
style={this.state.imgStyles} />
...

Related

ReactJS: What does “this.props.addDog(this.state.newDog);” mean in this code?

I'm studying a React app made up by one main component: App.js (the main one) and three other external components: Dog.js, DogItem.js, AddDog.js The App contain a set of items (Dogs): Dog.js, made up of single dog elements, DogItem.js, and a form: AddDog.js to add a new item: dog.
In the AddDog.js file, the only line I don't realize is: this.props.addDog(this.state.newDog); I have highlighted it below.
I'd like to underline that addDog in this.props.addDog(this.state.newDog); is different from the name of the component AddDog.
Here's AddDog.js
import React, { Component } from 'react';
class AddDog extends Component {
constructor() {
super();
this.state = {
newDog:{}
}
}
static defaultProps = {
categories: ['Web Design', 'Web Development', 'Mobile Development']
}
handleSubmit(e) {
if(this.refs.name.value === '') {
alert('Title is required');
} else if (this.refs.image.value === '') {
alert('Image link is required');
} else if (this.refs.breed.value === '') {
alert('Breed is required');
} else {
this.setState({newDog:{
name: this.refs.name.value,
breed: this.refs.breed.value,
image: this.refs.image.value
}}, function() {
this.props.addDog(this.state.newDog); // <<<<<<<<<<<<<<<<<
});
}
e.preventDefault();
}
render() {
return (
<div>
<h3 id="addDog">Add Dog</h3>
<form onSubmit={this.handleSubmit.bind(this)}>
<div>
<label>Name</label><br />
<input id="dogName" type="text" ref="name" />
</div>
<div>
<label>Image</label><br />
<input id="imageURL" type="text" ref="image" />
</div>
<div>
<label>Breed</label><br />
<input id="dogBreed" type="text" ref="breed" />
</div>
<br />
<input id="submitButton" type="submit" value="Submit" />
<br />
</form>
</div>
);
}
}
export default AddDog;
Here's the App.js
import React, { Component } from 'react';
import Dogs from './components/Dogs';
import DogItem from './components/DogItem';
import AddDog from './components/AddDog';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
dogs: []
};
}
getDogs() {
var defaultDogs = {dogs: [
{
name: 'Princess',
breed: 'Corgi',
image: 'https://s-media-cache-ak0.pinimg.com/originals/51/ae/30/51ae30b78696b33a64661fa3ac205b3b.jpg'
},
{
name: 'Riley',
breed: 'Husky',
image: 'http://portland.ohsohandy.com/images/uploads/93796/m/nice-and-sweet-siberian-husky-puppies-for-free-adoption.jpg'
},
]};
this.setState(defaultDogs);
}
componentWillMount() { // this soon display the two dogs before the render
this.getDogs();
}
handleAddDog(dog) {
let dogs = this.state.dogs;
dogs.push(dog);
this.setState({dogs:dogs});
}
handleDeleteDog(name) {
let dogs = this.state.dogs;
let index = dogs.findIndex(x => x.name === name); // function (x) {return x.name === name} is like x => x.name === name
dogs.splice(index, 1);
this.setState({dogs:dogs});
}
render() {
return (
<div className="App">
<Dogs dogs={this.state.dogs} onDelete={this.handleDeleteDog.bind(this)} />
<AddDog addDog={this.handleAddDog.bind(this)} />
<hr />
</div>
);
}
}
export default App;
Here's Dog.js
import React, { Component } from 'react';
import DogItem from './DogItem';
class Dogs extends Component {
deleteDog(name) {
this.props.onDelete(name);
}
render() {
let dogItem;
if (this.props.dogs) {
dogItem = this.props.dogs.map(dog => {
return (
<DogItem onDelete={this.deleteDog.bind(this)} key={dog.name} dog={dog} />
);
});
}
return (
<div className="Dogs">
<h1>Good Dogs</h1>
{dogItem}
</div>
);
}
}
export default Dogs;
Here's DogItem.js
import React, { Component } from 'react';
class DogItem extends Component {
deleteDog(name) {
this.props.onDelete(name);
}
render() {
return (
<ul className="Dog">
<img src={this.props.dog.image} href={this.props.dog.image} role="presentation" width="100" height="100"></img>
<br></br>
<strong>{this.props.dog.name}</strong>: {this.props.dog.breed} <a href="#" onClick={this.deleteDog.bind(this, this.props.dog.name)}>X</a>
<br></br>
</ul>
);
}
}
export default DogItem;
It's a callback function from the parent component. (In this case App.js)
It's used to add the new dog into the dogs array in the App's state.
So when you the function this.props.addDog(this.state.newDog) is called, it's calling the function that has been passed in as a prop by the parent component
(<AddDog addDog={this.handleAddDog.bind(this)} /> in App.js)
Which means when you call this.props.addDog(this.state.newDog),
this.handleAddDog() gets called in the App.js component with the new Dog Object as the argument (this.handleAddDog(this.state.newDog) with "this.state" refering to the state of the AddDog Component)
I hope that was detailed and clear enough ;)

The most "react" way to pass state to other components

I am fairly new to React. Currently I have two React components - Article.js and ControlForm.js
My render return in Article.js is this:
return (
<div className="article">
{article_wrapper.map( article =>
<div key={article.node.nid} className="article-main-display">
<h1 className="title" dangerouslySetInnerHTML={createMarkup(article.node.title)}/>
<div className="img-div"><img src={article.node.field_image.src} /></div>
<ControlForm />
<div dangerouslySetInnerHTML={createMarkup(article.node.field_user_hsk_level)} />;
<div className="field-name-field-chinese">
<div dangerouslySetInnerHTML={createMarkup(article.node.chinese)} />;
</div>
</div>
)}
</div>
);
The ControlForm.js has several form elements (all of which I'd like to be able to pass along if need be), but this is the main one:
<div className="form-item form-type-select form-group">
<label className="control-label">Font Size</label>
<select
value={this.state.value}
onChange={this.handleSizeSelect}
id="font-size"
className="form-control form-select"
>
<option value="0">Small</option>
<option value="1">Normal</option>
<option value="2">Large</option>
<option value="3">XL</option>
</select>
</div>
I'd like to be able to set a class on one of the divs in the Article.js based on changing a value in the ControlForm.js
What is the most "React" way to do this? Would creating a common parent to both be the best method (right now, their only parent in common is the main App.js)
Sorry if I don't totally understand how this is supposed to work - this is my first React app.
The class associated with the components are ControlForm and withFetching respectively.
EDIT - the demo example below works, but I have some additional issues with how to integrate it properly into my existing code. Here's the existing functions of ControlForm:
class ControlForm extends Component {
constructor() {
super();
this.state = { toggleActive: false, sizeSelect: "0", speed: 1.3, volume: .6};
this.onToggle = this.onToggle.bind(this);
this.handleSpeedChange = this.handleSpeedChange.bind(this);
this.handleVolumeChange = this.handleVolumeChange.bind(this);
this.handleSizeSelect = this.handleSizeSelect.bind(this);
}
onToggle() {
this.setState({ toggleActive: !this.state.toggleActive });
}
handleSizeSelect(event) {
this.setState({ sizeSelect: event.target.value });
this.setState({font: 'large-font'});
parentMethod(event.target.value);
}
handlePlayClick(e) {
e.preventDefault();
voice.playButtonClick();
}
handlePauseClick(e) {
e.preventDefault();
voice.pauseButtonClick();
}
handleStopClick(e) {
e.preventDefault();
voice.stopButtonClick();
}
handleVolumeChange(event) {
console.log(event.target.value);
this.setState({ volume: event.target.value });
}
handleSpeedChange(event) {
console.log(event.target.value);
this.setState({ speed: event.target.value });
}
Articles looks like this:
const withFetching = (url) => (Comp) =>
class WithFetching extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: false,
error: null,
dynamicClassName: "parentClass"
};
this.changeClassName = this.changeClassName.bind(this);
}
changeClassName(childData) {
this.setState({
dynamicClassName: childData
});
}
componentDidMount() {
this.setState({ isLoading: true });
fetch(url)
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(data => this.setState({ data, isLoading: false }))
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
//return "test";
return <Comp { ...this.props } { ...this.state } />
}
}
function createMarkup(html) {
return {__html: html};
}
function changeClassName(childData) {
console.log("GETS HERE!")
this.setState({
dynamicClassName: childData
});
}
const Articles = ({ data, isLoading, error }) => {
console.log(data);
console.log(isLoading);
const article_wrapper = data.nodes || [];
if (error) {
return <p>{error.message}</p>;
}
if (isLoading) {
return <p>Loading ...</p>;
}
return (
<div className="article">
{article_wrapper.map( article =>
<div key={article.node.nid} className="article-main-display">
<h1 className="title" dangerouslySetInnerHTML={createMarkup(article.node.title)}/>
<div className="img-div"><img src={article.node.field_image.src} /></div>
<ControlForm parentMethod={changeClassName} />
<div dangerouslySetInnerHTML={createMarkup(article.node.field_user_hsk_level)} />;
<div className="field-name-field-chinese">
<div dangerouslySetInnerHTML={createMarkup(article.node.chinese)} />;
</div>
</div>
)}
</div>
);
}
export default withFetching(API)(Articles);
Sorry about all of these questions, I know a lot of this is due to unfamiliarity with React - this is the first thing I've tried to build in React
You want to change parents from his childs.
First, you have to create a handler function at Article.js and pass it to ControlForm.js as a property.
<ControlForm changeDiv={this.changeDiv} />
Then you focus on ControlForm.js, whenever you want to happen, you just execute the function you passed as a the prop changeDiv, like this.props.changeDiv()
See also possible duplicate: How to update parent's state in React?
you can conditionally render a class based on state and your handler was missing the values from the event on the onChange
here's a demo of dynamically changing style base on the state
demo
Article.js ,
class Article extends React.Component {
constructor(props) {
super(props);
this.state = {
dynamicClassName: "parentClass"
}
this.changeClassName = this.changeClassName.bind(this);
}
changeClassName(childData) {
this.setState({
dynamicClassName: childData
});
}
// user dynamicClassName wherever u want .
return ( <
div className = "article" > {
article_wrapper.map(article =>
<
div key = {
article.node.nid
}
className = "article-main-display" >
<
h1 className = "title"
dangerouslySetInnerHTML = {
createMarkup(article.node.title)
}
/> <
div className = "img-div" > < img src = {
article.node.field_image.src
}
/></div >
<
ControlForm parentMethod={this.changeClassName} / >
<
div dangerouslySetInnerHTML = {
createMarkup(article.node.field_user_hsk_level)
}
/>; <
div className = "field-name-field-chinese" >
<
div dangerouslySetInnerHTML = {
createMarkup(article.node.chinese)
}
/>; < /
div > <
/div>
)
} <
/div>
);
}
In ControlForm js ,
class ControlForm extends React.Component {
constructor(props) {
super(props);
this.state = {
}
this.handleSizeSelect= this.handleSizeSelect.bind(this);
}
handleSizeSelect() {
this.props.parentMethod(this.state.value);
}
render() {
return (
<div className="form-item form-type-select form-group">
<label className="control-label">Font Size</label>
<select
value={this.state.value}
onChange={this.handleSizeSelect}
id="font-size"
className="form-control form-select"
>
<option value="0">Small</option>
<option value="1">Normal</option>
<option value="2">Large</option>
<option value="3">XL</option>
</select>
</div>
);
}
}

Ipad React play 2 sounds at the same time

I have the following: (https://www.npmjs.com/package/react-sound)
return (
<div className = { "wrapper " + currentState.bgColor}>
<div className="wrapper-inner">
<CustomSound soundOn = { this.state.soundOn} />
<CorrectSound soundOn = { this.state.correct} />
<IncorrectSound soundOn = { this.state.incorrect} />
<h1 className = { isH1Visible}><span>the big</span> reveal</h1>
{form}
{cat}
{grid}
{timeUp}
{correct}
{incorrect}
</div>
</div>
)
the soundOn props for correct and incorrect is set inside "getAnswer" function:
import React, { Component } from 'react';
class Action1 extends Component {
constructor(props) {
super(props);
this.state = {
answer1: "",
answer2: "",
answer3: "",
answer4: "",
answerDisabled: false
}
}
updateStateProperty(el, val) {
var s = {};
s[el] = val;
this.setState(s);
}
getAnswer = (e) => {
let answer = e.target.getAttribute('data-id');
this.props.checkAnswer(e);
if(e.target.getAttribute('data-question') == ("option_" + this.props.question.correct_option)){
this.updateStateProperty(answer, 'correct');
this.props.setCorrectOn(true);
}
else {
this.updateStateProperty(answer, 'wrong');
this.props.setIncorrectOn(true);
}
this.setState({
answerDisabled: true
})
setTimeout(() => {
this.props.setIncorrectOn(false);
this.props.setCorrectOn(false);
this.updateStateProperty(answer, '');
}, 1000);
setTimeout(() => {
this.setState({
answerDisabled: false
})
}, 1500)
}
render() {
return(
<div className="action">
<div className={"action-question " + this.props.catBgColor}>
<h3>{this.props.question.question}</h3>
</div>
<div className={"action-answers " + this.props.catBgColor}>
<p className={this.state.answer1 + " " + (this.state.answerDisabled ? 'disable-link' : "")} data-id="answer1" data-question="option_1" onClick={this.getAnswer.bind(this)}>{this.props.question.option_1}</p>
<p className={this.state.answer2 + " " + (this.state.answerDisabled ? 'disable-link' : "")} data-id="answer2" data-question="option_2" onClick={this.getAnswer.bind(this)}>{this.props.question.option_2}</p>
<p className={this.state.answer3 + " " + (this.state.answerDisabled ? 'disable-link' : "")} data-id="answer3" data-question="option_3" onClick={this.getAnswer.bind(this)}>{this.props.question.option_3}</p>
<p className={this.state.answer4 + " " + (this.state.answerDisabled ? 'disable-link' : "")} data-id="answer4" data-question="option_4" onClick={this.getAnswer.bind(this)}>{this.props.question.option_4}</p>
</div>
</div>
);
}
}
export default Action1;
each sound component has the following structure (with different sound files):
import React from 'react';
import Sound from 'react-sound';
class CustomSound extends React.Component {
render() {
return (
<Sound
url="./assets/sound.mp3"
playStatus={this.props.soundOn ? Sound.status.PLAYING : Sound.status.STOPPED}
playFromPosition={0 /* in milliseconds */}
/>
);
}
}
export default CustomSound;
when either of the 2 is triggered:
this.props.setCorrectOn(true); or this.props.setIncorrectOn(true);
the sound coming from:
<CustomSound soundOn = { this.state.soundOn} />
stops and starts again. Ideally that is a soundtrack that I would like to carryon playing and stop it at a later stage of the game.
The problem seems to be happening on iPad only. On chrome on desktop is absolutely fine.
Solution found at: http://www.schillmania.com/projects/soundmanager2/doc/
soundManager.setup({ ignoreMobileRestrictions: true });

Currency textbox react-native

I'm trying to create a currency input, that starts as something like
" $00.00"
and then when you start typing, it types the cents first, then moves on to the dollars (ie, updates the right side numbers first), e.g
" $00.50"
A reddit user posted this piece of JS code to help me : https://codepen.io/benjaminreid/pen/gRbgxK?editors=0010
const FormattedInput = class extends React.Component {
constructor(props) {
super(props);
this.amountChanged = this.amountChanged.bind(this);
this.state = {
value: 0,
};
}
amountChanged(e) {
this.setState({
value: e.target.value,
});
}
formatValue(value) {
return accounting.formatMoney(parseFloat(value) / 100);
}
render() {
return (
<div>
<label for="formatted">Formatted input</label>
<input
id="formatted"
type="text"
value={this.formatValue(this.state.value)}
/>
<label for="amount">Actual user input (type in here)</label>
<input
id="amount"
type="text"
onChange={this.amountChanged}
value={this.state.value}
/>
</div>
);
}
}
const App = () =>
<div>
<FormattedInput/>
</div>
;
ReactDOM.render(
<App/>,
document.querySelector('#app')
);
It works great, but the input you enter and the input that gets displayed are in two different boxes. I was wondering if there was a way to type straight into the formatted currency box?
Does anyone have a better solution perhaps? Help would be greatly appreciated.
I tried to code something to solve your problem. It is not so hard to build from scratch.
const FormattedInput = class extends React.Component {
constructor(props) {
super(props);
this.amountChanged = this.amountChanged.bind(this);
this.state = {
value: '',
rawValue: '',
};
}
amountChanged(e) {
let tmpAmount = '';
let tmpValue = e.target.value.slice(-1);
let newRawValue = this.state.rawValue + tmpValue;
if ( this.state.value.length > e.target.value.length) {
this.setState({
value: '',
rawValue: '',
})
}
else {
if (newRawValue.length === 1) {
tmpAmount = '0.0' + newRawValue;
}
else if (newRawValue.length === 2) {
tmpAmount = '0.' + newRawValue;
}
else {
let intAmount = newRawValue.slice(0, newRawValue.length - 2);
let centAmount = newRawValue.slice(-2);
tmpAmount = intAmount.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.' + centAmount;
}
this.setState({
value: tmpAmount,
rawValue: newRawValue,
});
}
}
formatValue(value) {
return accounting.formatMoney(parseFloat(value) / 100);
}
render() {
return (
<div>
<label for="amount">Mix</label>
<input
id="amount"
type="text"
placeholder="$0.00"
onChange={this.amountChanged}
value={this.state.value}
/>
</div>
);
}
}
const App = () =>
<div>
<FormattedInput/>
</div>
;
ReactDOM.render(
<App/>,
document.querySelector('#app')
);

React changing props on grandchildren: object is not extensible / tree traversing react children

I am following a tutorial and cannot get the following code to run.
When I run the following code I get the error Can't add property attachToForm, object is not extensible. Are you no longer to allowed to change child props in this way (ie. with child.props.key = value)? If not can you see a better way of adding a function to nested children only if the element is an input?
React.Children.forEach(children, function (child) {
if (child.props.name) {
child.props.attachToForm = this.attachToForm;
child.props.detachFromForm = this.detachFromForm;
}
if (child.props.children) {
this.registerInputs(child.props.children);
}
}.bind(this));
I am using es6 if that changes anything but the tutorial can be found here: http://christianalfoni.github.io/javascript/2014/10/22/nailing-that-validation-with-reactjs.html
FormComponent:
'use strict';
import React from 'react';
import BaseComponent from '#client/base-component';
export default class Form extends BaseComponent {
constructor(props) {
super(props);
this.state = {};
}
render() {
var classString = this.props.className ? this.props.className : '';
var classArray = ['_common-form', this.props.type ? 'form--' + this.props.type : 'form--basic' ];
for(var i = 0; i < classArray.length; i++){
if(classArray[i]){
classString = classString + ' ' +classArray[i];
}
}
var props = {
type: this.props.type,
className: classString,
style: this.props.style,
onSubmit: this.props.onSubmit
};
return React.createElement(
'form',
props,
this.newChildren
);
}
componentWillMount() {
this.inputs = {};
this.model = {};
this.newChildren = [];
this.registerInputs(this.props.children);
}
registerInputs(children) {
React.Children.forEach(children, function (child) {
if (child.props.name) {
child.props.attachToForm = this.attachToForm;
child.props.detachFromForm = this.detachFromForm;
}
if (child.props.children) {
this.registerInputs(child.props.children);
}
}.bind(this));
}
attachToForm(component) {
this.inputs[component.props.name] = component;
this.model[component.props.name] = component.state.value;
}
detachFromForm(component) {
delete this.inputs[component.props.name];
delete this.model[component.props.name];
}
}
ModalComponent:
'use strict';
import React from 'react';
import Modal from '#client/common/modal';
import Button from '#client/common/buttons';
import AddParticipant from './add_participant';
import Form from '#client/common/form_elements';
import Input from '#client/common/form_elements/input.js';
import SlideToggle from '#client/common/form_elements/slide_toggle.js';
import FormField from '#client/common/form_elements/form_field.js';
import FormSection from '#client/common/form_elements/section.js';
import BaseComponent from '#client/base-component';
export default class EditTeam extends BaseComponent {
constructor(props) {
super(props);
this.state = {
values: {
name: props.team.name,
mission: props.team.mission,
globalSearch: props.team.globalSearch,
public: props.team.public,
witcryptSecured: props.team.witcryptSecured
},
addParticipantModal: false
};
}
render() {
var participantsList = [];
this.props.team.participants.forEach(function(participant) {
participantsList.push(
<div className="participant" key={participant.key}>
<span className="participant-avatar" style={{backgroundImage:`url("${participant.avatar}")`}}></span>
<span>{participant.name}</span>
<span className={`${participant.roll}-action roll`}>{participant.roll}<a></a></span>
</div>
);
}.bind(this));
return (
<Modal className="_common-edit-team-settings" title={`Edit ${this.props.team.name}`} isOpen={this.props.modalIsOpen && this.props.editTeamModal} onCancel={this.props.toggleEditTeamModal} backdropClosesModal>
<Form onSubmit={this.saveChanges}>
<FormSection className="edit-team-details" sectionHeader="Team Details">
<FormField label="Name">
<Input name="name" value={this.state.values.name} onChange={this.handleInputChange} type="text" placeholder={this.props.team.name}/>
</FormField>
<FormField label="Mission">
<Input name="mission" value={this.state.values.mission} onChange={this.handleInputChange} type="text" placeholder={this.props.team.kitMission || 'Kit Mission'} multiline />
</FormField>
</FormSection>
<FormSection className="privacy-settings" sectionHeader="Privacy Settings">
<FormField label="Included in global search results" >
<SlideToggle name="globalSearch" defaultChecked={this.state.values.globalSearch} onChange={this.handleCheckedChange} type="checkbox" />
</FormField>
<FormField label="Accessible by anyone" >
<SlideToggle name="public" defaultChecked={this.state.values.public} onChange={this.handleCheckedChange} type="checkbox" />
</FormField>
<FormField label="Secured with WitCrypt" >
<SlideToggle name="witcryptSecured" defaultChecked={this.state.values.witcryptSecured} onChange={this.handleCheckedChange} type="checkbox" />
</FormField>
</FormSection>
<FormSection sectionHeader="Participants">
{participantsList}
<div id="add-participant" className="participant" onClick={this.toggleAddParticipantModal}>
<span className="participant-avatar" style={{backgroundImage:'url(/img/blue_add.svg)'}}></span>
<span>Add a Participant</span>
<span className="add-action roll"><a></a></span>
</div>
</FormSection>
<Button type="hollow-primary" size="md" className="single-modal-btn" block submit>Save</Button>
</Form>
<AddParticipant people={this.props.people} toggleAddParticipantModal={this.props.toggleAddParticipantModal} modalIsOpen={this.props.modalIsOpen} toggleAddParticipantModal={this.toggleAddParticipantModal} addParticipantModal={this.state.addParticipantModal} />
</Modal>
);
}
toggleAddParticipantModal() {
this.setState({
addParticipantModal: !this.state.addParticipantModal
});
}
handleCheckedChange(event){
var newState = this.state;
newState.values[event.target.name] = !newState.values[event.target.name];
this.setState(
newState
);
}
handleInputChange(event){
var newState = this.state;
newState.values[event.target.name] = event.target.value;
this.setState(
newState
);
}
saveChanges(e){
e.preventDefault();
}
}
Are you using React v.14 or above? the props object is now frozen and cant be changed. You can use React.cloneElement instead

Categories