Skip to content

Instantly share code, notes, and snippets.

@halitbatur
Last active November 17, 2022 16:02
Show Gist options
  • Save halitbatur/decef54b8d15050eeb7201f259285421 to your computer and use it in GitHub Desktop.
Save halitbatur/decef54b8d15050eeb7201f259285421 to your computer and use it in GitHub Desktop.
Discussion about React state, props and Events

Discussion questions about react:

Please discuss with your teams and answer these questions in your own words.

  1. What is the difference between state and props in React?
  2. When should you use state and props in React?
  3. What is the difference between stateful and stateless components in React?
  4. How can you pass props to a component in React?
  5. How does react handle events, can you write an example?
@ninaderochka
Copy link

Banel - Maryam Salah - Nina - Zeynab Hamad

  1. State vs. Props
    State is local and can not be modified nor accessed outside the component but can be modified using this.setState so it means it can only be modified locally. While props on the other hand, can make your components reusable because it can pass down component data from the parent component.
  2. The useState Hook can be used to keep track of strings, numbers, booleans, arrays, objects, and any combination of these! We could create multiple state Hooks to track individual values.
    Default props can be used to define any props that you want to be set for a component, whether or not a value is actually passed in from the parent component. When using default props, you can still override the values specified in the default props object when you pass in values from the parent component.
  3. MR. OBVIOUS stateful holds a state and stateless has no state! WOW! However, both can be used as props. NICE!
  4. we can pass props using the "export default function functionName()" and then we read props inside the child component by
    function functionName({ name, argument }) {
    whatever is passed is available here
    }
  5. Event handler is defined as a regular function
    the difference between react and vanilla javascript is that in react we use camel case ex. onclick(javascript) onClick(react)

function developer(){
function intro(){
alert("My Name is Slim Shady and I am a Rapper");
}
return click me

@db0q
Copy link

db0q commented Nov 17, 2022

team members :- Mustafa M. , Danah Osta ,Hevar Tofiq , Roza Nawzad , Omar Deeb
1- props are data that are passed into a component as parameters but the state is data that will be managed inside the part as much as local variables that declare inside a function
2-Props are used to transmit data, while the state is used to manage data. Additional data is read-only and cannot be modified by components that receive it from outside. State data can be changed by its components, but is private (not accessible from outside)
3-In React, a stateful component is a component that has a state which means data can be changed . Stateless components, on the otherhand means data can be changed .
4- pass it as parameters in the function ,for example :-
<Avatar {...props} />
5-its sumiller to HTML

Activate Lasers


Activate Lasers

@noor-ridha
Copy link

Room 8 (Noor Ridha Ramyar Nanor Baraa and Mohammed othman
1.state is like a local variable can not be accessed or modified outside of the component
props make components reusable by giving components the ability to receive data from their parent component in the form of props.
2.Props is short for properties and they are used to pass data between React components.React has another special built-in object called state, which allows components to create and manage their own data. Data from props is read-only, and cannot be modified by a component that is receiving it from outside. State data can be modified by its own component, but is private (cannot be accessed from outside)
3.for stateful :

  1. stores data about the state of component stage in memory
  2. have authority to change the state
  3. contains history about changes in state
  4. can be used when building element that accepts user input

for stateless:

  1. calculate the internal state of the components
  2. has no authority on state
  3. contains no history
  4. can be used When creating element does not need to be interactive

5.5.React events are named using camelCase, rather than lowercase for example
Activate Lasers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment