State and component - React

#1

HI,
I have a warning and the input doesn’t appear?

23:3 warning Expected an assignment or function call and instead saw an expression no-unused-expressions

the line 23 is

import React from 'react';

class Relation extends React.Component {
  constructor() {
    super()
    this.state = {
      txt : 'this the state txt',
    }
  }
  update(e) {
    this.setState({txt: e.target.value});
  }
  render() {
    return (
      <div>
        <h1> {this.state.txt} </h1>
        <Widget update={this.update.bind(this)} />
      </div>
    );
  }
}
const Widget = (props) => {//arguments props it's update prop
  <input type='text' onChange={props.update} />
}

export default Relation

import React from ‘react’;
import ReactDOM from ‘react-dom’;
//import Props from ‘./Props’;
//import App from ‘./App’;
//import State from ‘./State’; //video 5
import Relation from ‘./Relation-component’; //video 6
//relation-component.js

ReactDOM.render(
  <div>
    {/*<App att='create by a another value'>*/}
      {/*</App>*/}
    {/* video 4 */}
    {/*<Props cat={8} att='create by me Xaviou'>*/}
      {/*</Props>*/}
    {/* video 5 */}
    {/*<State /> */}
    {/* video 6 */}
    <Relation />
  </div>,
  document.getElementById('root')
);
#2

I’m pretty sure that update() isn’t a method on the component class, so you’ll have to declare it as a function.

function update(e) {
    this.setState({txt: e.target.value});
  }
1 Like
#3

I aggree with you for update but with ‘function’ :

Error in ./src/Relation-component.js
Syntax error: Unexpected token, expected ( (10:11)

   8 |     }
   9 |   }
> 10 |   function update(e) {
     |            ^
  11 |     this.setState({txt: e.target.value});
  12 |   }
  13 |   render() {

 @ ./src/index.js 16:25-56
#4

I take off the curly bracket and is working?
What the difference here?

let Widget = (props) => 
  <input type='text' onChange={props.update} />

Edit: it’s a component syntax with one line, a short way to write a compenent.

#5

It took me a bit to figure out what you had changed. Your original code would work just fine, but you need to add a return statement:

let Widget = (props) => {
  return (<input type='text' onChange={props.update} />);
}

Those curly braces indicate a function block with no implicit return. The way you’re writing an arrow function implies the return of what follows the arrow, and it’s the cleanest way you can write a pure function in ES6. :thumbsup:

1 Like
#6

thanks, that weird in one line function I don’t need the return statement:slight_smile:

Edit: I didn’t know for the implicit return…

the return statement works too without the parentheses if is outside a class.

return <h1>Title : {props.text}</h1>
#7

I don’t think parentheses are ever required, but it’s frequently used with JSX. It’s just a style thing.

#8

But it’s preferred to use parentheses because he’s returning JSX (like the render method)

#9