Vlad Feninets

selectNode(node) {
	let nodeNew = Object.assign({}, node)
    this.setState({selected_node: nodeNew});
}

import React, { Component } from 'react'


export default class TestPage extends Component {
constructor(props) {
    super(props);

    this.input = null
    this.state = {
        nodes: [
            { id: 1, content: "qwerty", edit: false },
            { id: 2, content: "abcdef", edit: false }
        ],
        inputVal: ''
    };
}

toggleEdit(id, isEdit) {
    this.setState({
    	...this.state,
    	nodes: this.state.nodes.map(n => {
    		if( n.id === id ) {
    			n.edit = isEdit
    		}
    		return n
    	})
    })
}  

handleContent(event) {
	....
}

render() {
    return (
        <div>
            <table>
                <thead>
                    <th>id</th>
                    <th>content</th>
                    <th>edit</th>
                </thead>
                <tbody>

                {this.state.nodes.map((node) => {
                    if(node.edit) {
                        return <tr key={node.id}>
                            <td>{node.id}</td>

                            <td><input
                            	onChange={this.handleContent.bind(this)}
                            	ref={(input) => this.input = input}
                                value={this.state.inputVal}
                            />
                            </td>
                            <td>
                                <button type="submit">save</button>
                                <button onClick={() => this.toggleEdit(node.id, false)}>cancel</button>
                            </td>
                        </tr>
                    } else {
                        return <tr key={node.id}>
                            <td>{node.id}</td>
                            <td>{node.content}</td>
                            <td><button onClick={() => this.toggleEdit(node.id, true)}>edit</button></td>
                        </tr>;
                    }
                })}

                </tbody>
            </table>
        </div>
    );
}
};

class MyComponent extends Component {
	constructor() {
		super()

		this.state = {
			currentTheme: "dark"
		}
	}

	changeTheme(themeName) {
		this.setState({
			currentTheme: themeName
		})
	}

	render() {
		return (
			<div>
				...

				<button onClick={() => this.changeTheme("dark").bind(this)}> {/* байнд для доступа к this внутри ф-и */}
					I wanna dark!
				}
				</button>

				<button onClick={() => this.changeTheme("light").bind(this)}>
					I wanna light!
				</button>
			</div>
		)
	}
}

onClick={() => this.props.goDark()} /* например это вызов из ребенка, который очень глубоко */


/* в это уже самый верхний (корневой) компонент */

goDark() { ... }
goLight() { ... }

<RootComponent>
	<Child currentTheme={this.state.currentTheme} />
</RootComponent>

<div className={ this.props.currentTheme === 'dark' ? 'dark-wrapper' : 'light-wrapper' }>
	<button className={this.props.currentTheme === 'dark' ? 'btn-primary-yellow' : 'btn-primary-blue' }></button>
</div>

const num = () => Math.sqrt(num)

export default num

export function num() {
	return Math.sqrt(num)
}

........

import { num } from './sqrt.js'

document.addEventListener("DOMContentLoaded", function() {
	document.querySelector("#my_input").value = ""
})