Develop Reference

ReactJS - change class of component from another component?

Very new to React, and coming from a jQuery background, the first thing I want to be able to do is toggle classes.
I understand how I can toggle a class within the same react component like this:
class ButtonParent extends React.Component {
constructor(props) {
super(props)
this.state = {
condition: false
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState({
condition: !this.state.condition
})
}
render() {
return (
<ButtonChild
className={ this.state.condition ? "button toggled" : "button" }
toggleClassName={ this.handleClick }
>
Click me if you dare!
</ButtonChild>
)
}
}
class ButtonChild extends React.Component {
render() {
return (
<div
className={ this.props.className }
onClick={ this.props.toggleClassName }
>
{ this.props.children }
</div>
)
}
}
ReactDOM.render(<ButtonParent />, document.getElementById('app'))
But what if I have a a separate component that I want to use in order to toggle the class of the component? Is there no easy way to do this in React?
Thanks!

Just create an ButtonChild.js file near your ButtonParent.js file and export your component
export default class ButtonChild extends React.Component {
render() {
return (
<div
className={ this.props.className }
onClick={ this.props.toggleClassName }
>
{ this.props.children }
</div>
)
}
}
Import it in you ButtonParent.js file like this
import ButtonChild from './ButtonParent.js'

ReactJs: How to add/append a component on click of button

Say <componentX \> when onClick of "create box" button, the componentX should append inside of box-container. If i click create box 3 times, then three componentX should append inside box-container (It's not that simply keeping the component then hide and show when click of create box). What are all the ways to achieve this in ReactJS.
import ComponentX from './ComponentX.jsx';
class App extends React.Component{
constructor(){
super();
this.state = {
}
}
render(){
let board = Box;
return(
<div>
<a onClick={}>Create Box</a>
<div className="box-container"></div>
</div>
);
}
}
export default App;

Try something like this:
import ComponentX from './ComponentX.jsx';
class App extends React.Component{
constructor(){
super();
this.state = {
children: [];
}
}
appendChild(){
this.setState({
children: [
...children,
<componentX \>
]
});
}
render(){
let board = Box;
return(
<div>
<a onClick={() => this.appendChild()}>Create Box</a>
<div className="box-container">
{this.state.children.map(child => child)}
</div>
</div>
);
}
}
export default App;

You can conditionally render by using component state like this:
import ComponentX from './ComponentX.jsx';
class App extends React.Component{
constructor(){
super();
this.state = {
showComp = false;
}
}
handleClick = () => {
this.setState({
showComp: true,
})
}
render(){
let board = Box;
const { showComp } = this.state;
return(
<div>
<a onClick={this.handleClick}>Create Box</a>
<div className="box-container">
{showComp && <ComponentX />
</div>
</div>
);
}
}
export default App;

Multiple components within a file

Says I have component A
like
export default class ComponentA extends components {
render(){
return() //use componentB here?
}
}
class ComponentB extends components {
}
how can I create another component and use it within ComponentA?

How can I create another component and use it within ComponentA?
There are two possible ways of doing that:
1- Define the component in the same file, exporting of that component will be not required because you will use that component in the same file.
2- Define the component in another file then export that component. Importing of component will be required in this case.
We can create as many components as we want in the same file, and we can use those components in the same way as we use HTML tags div, span, p etc.
Example:
Using ComponentB inside another component ComponentA:
export default class ComponentA extends components {
render(){
return(
<div>
{/*other code*/}
<ComponentB /> // notice here, rendering ComponentB
</div>
)
}
}
Define ComponentB in same file like this:
class ComponentB extends components {
}
Define ComponentB like this in another file:
export default class ComponentB extends components {
}

Just use it, like any other component:
export default class ComponentA extends components {
render() {
return <ComponentB />; // Use ComponentB here
}
}
class ComponentB extends components {
render() {
return <div>I'm B</div>;
}
}
Example:
/*export default*/ class ComponentA /*extends components*/ extends React.Component {
render() {
return <ComponentB />; // Use ComponentB here
}
}
class ComponentB /*extends components*/ extends React.Component {
render() {
return <div>I'm B</div>;
}
}
ReactDOM.render(
<ComponentA />,
document.getElementById("react")
);
<div id="react"></div>
<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>

Yes, you are in the right track.
export default class ComponentA extends React.Component {
render(){
return(<ComponentB />);
}
}
class ComponentB extends React.Component {
render() {
return (<h1>Hello world! This is Component B</h1>)
}
}
or better yet, use stateless components like so: (if it's a really dumb component)
const ComponentB = () => (<h1>Hello world! This is Component B</h1>);

How to make/access state using props in react?

I made an app with multiple components and want their state to be accessed using parent/main app, I'm not sure how to get it. what i'm trying to do is when i change state in main "App" the component state should change. One of the component is 'checkbox' and now i want to access its state using parent app, I made multiple attempts but not getting it done. my code goes like this..
This is Main 'App' code:
import React, { Component } from 'react';
import Checkbox from './checkbox';
import Radio from './Radio';
import ToggleSwitch from './ToggleSwitch';
import PrimaryButton from './PrimaryButton';
class App extends Component {
onClick(isClicked){
isChecked:true
};
render() {
return (
<div id="form">
<Checkbox
onClick={this.onClick}
/>
<RadioButton
onClick={this.onClick}
/>
</div>
);
}
}
export default App;
The component i want to access goes like this:
import React, { Component } from 'react';
class Checkbox extends Component {
constructor(props){
super(props);
this.state={
isChecked:true
};
};
onCheck(){
this.setState({
isChecked: !this.state.isChecked
});
this.props.isClicked()
};
render() {
return (
<div>
<div
className={this.state.isChecked ? 'checked': 'unchecked'}
onClick={this.onCheck.bind(this)}
>
</div>
</div>
);
}
}
export default Checkbox;

You forgot to bind the onClick event in the app component, try this it will work :
class App extends Component {
onClick(isClicked){
console.log('isClicked', isClicked);
};
render() {
return (
<div id="form">
<Checkbox onClick={this.onClick.bind(this)}/>
</div>
);
}
}

If you already have onClick handler for the Checkbox I don't see why you couldn't just move the state up to the App component and just pass down a callback from there to the Checkbox that will update the parent state. That seems like a more React way to do it, to me.
class App extends Component {
constructor(props){
super(props);
this.state={
isChecked:true
}
}
onClick = (isClicked) => {
this.setState({isChecked: !this.state.isChecked})
}
render() {
return (
<div id="form">
<Checkbox
onClick={this.onClick}
ischecked={this.state.isChecked}
/>
</div>
);
}
}
Component
class Checkbox extends Component {
onCheck(){
this.props.onClick()
}
render() {
return (
<div>
<div
className={this.props.isChecked ? 'checked': 'unchecked'}
onClick={this.onCheck.bind(this)}
>
</div>
</div>
)
}
}

How to modify react extended class?

So let's say I have this
class ExampleOne extends ExampleTwo
and in ExampleTwo has this
return (
<div className="test">
<MyComponent exampleLabel="ExampleTwo">
Is it possible to modify MyComponent's exampleLabel to say "ExampleOne" for class ExampleOne?

There are two scenarios
1) If you can modify ExampleTwo, use react props
class ExampleTwo extends React.Component {
render() {
return <div>
<MyComponent exampleLabel={this.props.exampleLabel || 'ExampleTwo'}/>
</div>;
}
}
// And render as
<ExampleOne exampleLabel="ExampleOne"/>
2) If you can't modify ExampleTwo, then you can override render function
class ExampleOne extends ExampleTwo {
render() {
return <div>
<MyComponent exampleLabel="ExampleOne"/>
</div>;
}
}

Yes, Extending ExampleOne is fine, you would just pass it as a prop like so:
In ExampleTwo:
return (
<div className="test">
<MyComponent exampleLabel="ExampleOne">