Answers for "props react"

9

create react component class

class MyComponent extends React.Component{
    constructor(props){
        super(props);
    };
    render(){
        return(
            <div>
              <h1>
              	My First React Component!
              </h1>
            </div>
        );
    }
};
Posted by: Guest on February-19-2020
14

props in react

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />      <Welcome name="Cahal" />      <Welcome name="Edite" />    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
Posted by: Guest on April-13-2020
2

render props

//Render props are functions that are passed to props as values
const User = (props) => {
	const [name, setName] = useState('John')

	//we pass values to prop-function as args
	return <div>{props.render(name)}</div>
}

//Then we can use this component like this:
<div>
  //when using the component we receive the passed values (name) as args here 
  <User render={(name) => <div>{name}</div>} /> 
</div>
Posted by: Guest on December-23-2020
0

props in class react

class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        <h1>Move the mouse around!</h1>
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}
Posted by: Guest on August-13-2021
3

class to functional component react

// convert a class component to a functional component
class MyComponent extends React.Component {
	state: { 
      name: 'Bob' 
    }
	render() {
      return (
        <p>Hello, my name is {this.state.name}</p>
      );
    }
}

const MyComponent = () => {
  const [name, setName] = React.useState('Bob');
  return (<p>Hello, my name is {name}</p>);
}
Posted by: Guest on December-04-2020
1

props react

function Welcome(props) {  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;ReactDOM.render(
  element,
  document.getElementById('root')
);
Posted by: Guest on March-31-2020

Code answers related to "Javascript"

Browse Popular Code Answers by Language