how do I display the result of this code in my browser
code to be displayed in browser
import React from 'react';
import {render} from 'react-dom';
import React from 'react';
import {render} from 'react-dom';
class ManagedControlDemo extends React.Component {
constructor(props){
super(props);
this.state = {message: ""};
}
handleChange(e){
this.setState({message: e.target.value});
}
render() {
return (
<div>
<legend>Type something here</legend>
<input
onChange={this.handleChange.bind(this)}
value={this.state.message}
autoFocus />
<h1>{this.state.message}</h1>
</div>
);
}
}
render(<ManagedControlDemo/>, document.querySelector('#app'));
That last line in your code is telling React to "grab the DOM element in my HTML file with the ID of 'app' and render this ManagedControlDemo component I've made into it."
So note the HTML in the following snippet:
class ManagedControlDemo extends React.Component {
constructor(props){
super(props);
this.state = {message: ""};
}
handleChange(e){
this.setState({message: e.target.value});
}
render() {
return (
<div>
<legend>Type something here</legend>
<input
onChange={this.handleChange.bind(this)}
value={this.state.message}
autoFocus />
<h1>{this.state.message}</h1>
</div>
);
}
}
ReactDOM.render(<ManagedControlDemo/>, document.querySelector('#app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Related
When I am trying to run my react app it shows me the following error.
Earlier The code was working on a different app. But when I created a new app and trying to create any function or state it is showing it is undefined
The Code is provided below -
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App'
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React from 'react';
import SearchBar from './SearchBar';
class App extends React.Component {
onSearchSubmit = (term) => {
console.log(term)
};
render() {
return (
<div className="ui container" style={{ marginTop: '10px' }}>
<SearchBar onSubmit={this.onSearchSubmit} />
</div>
);
}
}
export default App;
SearchBar.js is
import React from 'react';
class SearchBar extends React.Component {
state = { term: '' };
onFormSubmit = (event) => {
event.preventDefault();
this.props.onSubmit(this.state.term);
}
render() {
return (
<div className="ui segment">
<form onSubmit={this.onFormSubmit} className="ui form">
<div className="field">
<label>Image Search</label>
<input
type="text"
onChange={e => this.setState({ term: e.target.value })}
value={this.state.term}
/>
</div>
</form>
</div>);
}
}
export default SearchBar;
The error shown is -
Failed to compile
src/components/App.js
Line 7:9: 'onSearchSubmit' is not defined no-undef
src/components/SearchBar.js
Line 4:5: 'state' is not defined no-undef
Line 6:5: 'onFormSubmit' is not defined no-undef
Search for the keywords to learn more about each error.
I think you're missing a constructor in your components
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
term: ''
};
}
//...
}
ReactJS DatePicker works fine when I keep the state inside Datepicker itself, however once I lift the state up it stops working - nothing happening when I select a date.
This code works:
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class Datepicker extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return <DatePicker selected={this.state.date} onChange={this.handleChange} />;
}
}
class Index extends React.Component {
render() {
return (
<div>
<Datepicker />
</div>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
But this code does not work - nothing happens when I select a date in the datepicker:
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class Datepicker extends React.Component {
render() {
return (
<DatePicker
selected={this.props.date}
onChange={() => {
this.props.handleChange(this.props.date);
}}
/>
);
}
}
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return (
<div>
<Datepicker date={this.state.date} handleChange={this.handleChange} />
</div>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
I also uploaded code example here (index.js is not working as expected while index2.js is working).
Would be very grateful if anyone could advise how to lift the state up and at the same moment have Datepicker working.
The issue is you are passing the this.props.date into the handleChange function which never changes.
You can simply remove the arrow function and just call this.props.handleChange without passing it any parameters. It should automatically choose the new date value selected.
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const Datepicker = props => (
<DatePicker selected={props.date} onChange={props.handleChange} />
);
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return (
<Datepicker
date={this.state.date}
handleChange={this.handleChange}
/>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
See a working example: https://codesandbox.io/s/my4zp6rj8y
Hello everybody I'm wondering if I can pass a state value from a component to other where I'm returning jsx code to be displayed for example I have 3 components.
1
import React, { Component } from 'react';
import Conteneur from './Conteneur';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
<Conteneur values={this.state.value} />
</form>
);
}
}
export default Header;
2 app.js
import React, { Component } from 'react';
import Header from './Header';
import Conteneur from './Conteneur';
import './App.css';
class App extends Component {
render() {
return (
<div className="App" >
<br />
<Header />
<br />
<Conteneur />
</div>
);
}
}
export default App;
3 and finally
import React, { Component } from 'react';
const Conteneur = () => {
return (
<div className="tab"><span>ok test </span></div>
);
};
export default Conteneur;
I like to pass the state value of header that I have from the input to conteneur and then display in the box while I have some code all the examples that I saw online they are sending state like this:
class Dashboard extends Component {
...
...
render(){
return(
<Sidebar data={this.state.data1}/>
);
}
}
So can I do like this <Conteneur values={this.state.value} /> in the form ?
And I imported Conteneur.
i updated the code but the output is
Yes you can do, only one thing you are missing. Receive the props in the function parameters then render that in the ui.
Like this:
const Conteneur = (props) => {
return (
<div className="tab"><span>value: {props.value} </span></div>
);
};
I'm trying to change the state of one component from another component and my state is not updating, I'm sending back the prop i want to update in my app component but this.setState doesnt work
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';
class App extends Component{
constructor(){
super();
this.state = {
homeLink: "Home"
}
}
onChangeLink(newLink){
this.setState({
homeLink: newLink
});
}
render(){
var user = {
name: "sadf"
}
return(
<div className="container">
<div className="row">
<Header changeLink={this.onChangeLink.bind(this)}/>
</div>
</div>
);
}
}
ReactDOM.render(
<App />,document.getElementById('app')
And here is my header component
import React, {Component} from 'react';
class Header extends Component{
constructor(){
super();
this.state = {
homeLink: 'New Link'
}
}
onChangeLink(){
this.props.changeLink(this.state.homeLink);
}
render(){
return(
<nav className="navbar navbar-default">
<button onClick={this.onChangeLink.bind(this)}>Change Link</button>
</nav>
)
}
}
export default Header
Try something like this:
let newPropValues = {
root: event.target.value
};
this.setState(Object.assign({}, this.state, newPropValues));
I would like to have, an Add button. The following is the React.js code that I thought is one way of implement the logic that I want, but unfortunately it's doesn't work.
my getting this Error:
bundle.js:47 Uncaught Error: Cannot find module "./src/index.js"
at webpackMissingModule at Object.<anonymous>
at __webpack_require__
How do I solve this problem?
import React from "react"
import ReactDOM from "react-dom"
import SearchBar from "./components/search_bar"
const API_KEY = "TheRealAPIKeyWouldGoHere"
const App = () => {
handleChange(value){
this.setState({
value: event.target.value
});
}
return ( <div>
<SearchBar onChange={this.handleChange}/>
</div>
)
}
ReactDOM.render(<App />, document.querySelector(".container"))
This is my component. I have assigned Button to input but i can't figure out how to make it work.
import React, { Component } from "react"
class SearchBar extends Component {
constructor(props){
super(props)
this.state = {term: ""}
}
handleChange(evt){
this.props.onChange(value);
}
render () {
return <div>
<button onClick={this.handleChange}>Search</button>
<input ref="inputName" onChange= { event => console.log(event.target.value)} />
</div>
}
}
export default SearchBar
In your component:
import React, { Component } from "react"
class SearchBar extends Component {
constructor(props) {
super(props)
this.state = { term: '' }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({ value: event.target.term })
}
handleSubmit(event) {
console.log(event.target.value)
event.preventDefault()
}
render() {
return (
<div>
<button onClick={this.handleSubmit}>Search</button>
<input
type="text"
value={this.state.term}
onClick={this.handleChange}
/>
</div>
)
}
}
export default SearchBar