Discussion about React state, props and Events

reaactPropsStateAndEvents.md

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?

Nma, Hala, Noor, Riham, Rozhyar

1. states can be asynchronous function and it can be changed, but Props read only similar to parameters in functions.
2. the utilization of props is to pass data and the states is used to manage the data.
3. the stateless component doesn't store data similar to a calculator that always starts from zero. however stateful component stores data similar to our computer terminal; while we type something for the second time it will auto complete the rest as it stored before, without us finishing it.
4. it has to be written inside JSX file, and has to be passed inside Avatar function.
5. the event name is camelCased and it's written inside the JSX file like the following example:

Submit

team number3: Amal Salah, Zoriana, Ahmad Hassoun and Sakar.
1- Both hold information that influences the output of render. The difference are
a- props like function parameters, have to be passed to the component. State likes variables which are declared inside the component.
b- 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
2- Props are used to communicate between components. States can be used for rendering dynamic changes with the component.
3- A stateful component is a component that holds some state. Stateless components are those components which don't have any state at all
4- Add them to the JSX, like html. For example <component height={size} / >
5- Handling events with React elements is very similar to handling events on DOM elementsReact events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string

Team : Ali , Darya , Abdulbari , Dalia , Fadi

1-Props is used for transferring data between components, but state is used for changing state of a data (varible)
2-When you want to pass a data from parent component to child component then you have to use Props, and when you want to manage a state of a data then you have to use STATE for it.
3-Sateful component contains state and the data will be modified by time, but stateless, not hold any state more looks like static components
4-You will pass it as a parameter from parent component to the child components
5-we use html attributes, for example, unlike, onSumbit...
Code example :
" class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}

render() {
// This syntax ensures this is bound within handleClick
return (
<button onClick={() => this.handleClick()}>
Click me

);
}
} "

team member room 7: mahnaz, Mohamad marshal, roqaya, huda

1. props are like properties and it is primarily used to communicate between child and parent component, as they are a set of the attribute, meanwhile state is a set of variable that determines the current condition of the component.
2. props can be used when you passed data and they can be read only and can not be modified by the component that is receiving something from outside, and state can be used for managing data so we can modify it by a component that is receiving data from the outside.
3. in a stateful component it can use react life cycle and also the data keeps changing, but the stateless component the data is still the same and they can not use react life cycle hooks.
4. to pass props we add them to 'jsx' the same way we would for HTML attribute .
5. To add an event handler, you will first define a function and then [pass it as a prop] to the appropriate JSX tag. For example:
   export default function Button() {
   function handleClick() {
   alert('You clicked me!');
   }

return (

Click me

);
}
<button onClick={function handleClick() {
alert('You clicked me!');
}}>

Team 5: Aland, Ruba, Ali, Shad
1-props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).
2-Props are used to pass data, whereas state is for managing data.
3-In React, a stateful component is a component that holds some state. Stateless components, by contrast, have no state. Note that both types of components can use props.
4- Props are the information that you pass to a JSX tag. For example, className, src, alt, width, and height are some of the props you can pass to an .Like
" <Avatar person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}" => props passing
" function Avatar({ person, size })" => props decleration
" alt={person.name} " => props Calling

5- React js handles events same as HTML with different syntax like for a button ( "<button onclick="activateLasers()"">
Activate Lasers
) in the HTML, and for React it's written in that way ( "<button onClick={activateLasers}">
Activate Lasers
)

Shahla, Sarah, Ameen, Nanoor and Muhammad diary

1 and 2- props get passed to the component-like function whereas the state is managed inside the component-like variable declared inside a function.
props can be passed from outside, whereas the state can only be defined and maintained inside the component itself.
Props are immutable but State is mutable.

3- the stateful components are keeping track of changing data, while stateless components print out what is given to them via props, or they always render the same thing.

4- we add them to the JSX, just like you would with HTML attributes. for example:

5-React will set up event listeners and handle events that happen inside the React app.,
Activate Lasers

Sara Bakr, Aya Marmash, Wafa'a Al-hayek, Heyam M

1-Props are used to pass data from one component to another similar to function parameters whereas the state is managed within the component (similar to variables declared within a function), states is used to read and write data while props used only to read data

2-Props are used when you went to store data that can be accessed by the children of a React component .while state can only be used within a class component.

3-a stateful component is a component that holds some state. Stateless components, by contrast, have no state, Which means the stateful components keep track of changing data, while stateless components print out what is given to them via props, or they always render the same thing

4-adding them to the JSX

5-using event handlers, Event handlers determine what action is to be taken whenever an event is fired. This could be a button click or a change in a text input.

function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}

return (

Submit

);
}

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

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

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