We Keep Coding

how to pass an element from other components to a specific component in React.js [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
Improve this question
I have a component which called <Header> and another component <AboutMe>, I wanted to pick an element with an id from <AboutMe> and add an event listener onClick.
the thing is whenever i try to use getElementById it returns the element which I wanted but when I try to add the event listener...throws an error.

Related to your title of this question:
You can achieve the passing of data and objects through to child components through the use of attributes where you use your component.
You really don't need to use the DOM to access the elements on the page, and with React being highly dynamic in nature, the DOM is in a constant state of change which can lead to many issues if you try to bypass React.
So if you have your header component used in your app like this...
<PageHeader userData={ userData } />
Then within your component, which is named PageHeader in this example, define the constants as:
const PageHeader = (props) => {
const userData= props.userData;
Note the object name to use with "props" is the same that you used with the attribute name.
Props will contain all attributes that are defined on the attribute where the component is used.
Just to provide another way to use "props" (the name is not significant) I'll include this code snippet too. Notice that react will auto map each one to it's proper constant... which is pretty cool.
const PageHeader = ( props ) => {
const { uischema, schema, path, visible, renderers, userData } = props;
And one last thing that I should mention, is the use of the props.children, which can be very useful too. This is where DivScrollable is defined, and is using the props.children.
const DivScrollable = (props) => {
return (
<div className={styles.divscrollable} >
{props.children}
</div>
);
};
So the power of props.children is that it passes along the contents of what is contained between the opening and closing tags of a component. In this example it's the MyComponent object that is within the props.children object. But it could also include others too since it's "all of the content" between the component tags.
<DivScrollable>
<MyComponent src={props.src}
theme="monotyped"
spacing="4"
enableClipboard="true"
name={null}
/>
</DivScrollable>
To then address the onClick handling, which you mention within the body of your question, you can use use it like the following, where I am reusing the above examples... see the "onClick" addition within the DivScrollable component.
const DivScrollable = (props) => {
const performSomeFunction= (aValue) => {
... code goes here...;
};
return (
<div className={styles.divscrollable}
onClick={() => {
performSomeFunction(true);
}} >
{props.children}
</div>
);
};

I am not sure why you mentioned Header component, but did you try like this?
function clickEvent() {
...
}
const el = document.getElementById("element_id");
el.addEventListener("click", clickEvent, false);

How to add react-hooks on the ready site? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I know how to add only react and react-Dom , but if we will write some text on the react-hooks as the code:
const state = useState('name')
We will receive an error :
Uncaught ReferenceError: useState is not defined
ITS ISNT APP , Its just a ready site i know how to add hooks on the app , but dont know how on the ready site

you need to import useState from React as shown on https://reactjs.org/docs/hooks-state.html
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}```

Javascript - ReactNative user input array

Im very new to react-native and javascript. I dont really know how to start this little project
users can select 1 option for each question
what pet do you prefer?
a dog
a cat
what color do you want your pet to be
red
green
Based on what they selected, an image (e.g.: a red dog) will appear.
I dont really know wether I should store the answers in an array and how to load the questions?

The most important concept of any react-native (and react for that matter) app is the concept of component.
What you want is to make a component "Question" that can receive via props the question's title and its possible answers. This way you can avoid repeating code when making different questions. I'll let you play with the inner implementation, should be easy enough searching for examples using checkboxes and labels.
Then, from your root component (or the component where you want to display these questions), you instance two of these Question with the respective data. This would look something like:
const App = () => {
return (
<View>
<Question
title="What pet do you prefer?"
answers=[
"A dog",
"A cat"
]
/>
<Question
title="What color do you want your pet to be?"
answers=[
"red",
"green"
]
/>
</View>
)
}
You can also add a button so that clicking it shows the corresponding image.
Finally, what you will need is to have the answers available in your root component, so that you can get the image via a request or however you were going to get it. After that, you just need to use it.
To do this, I defined state within the App component, I passed props to several components, and used some defined react native components. You should read about all of these in react native's docs, which are pretty good.
Here is the example:
const App = () => {
const [state, setState] = useState({})
const [image, setImage] = useState(null)
// This is useful for changing this component's state from within the children
const changeAnswer = ({question, answer}) => {
setState({...state, question: answer})
}
const getImage = async () => {
const { data } = await apiCall(state) // Or however you were going to get the image
setImage(data.image)
}
return (
<View>
<Question
changeAnswer={changeAnswer}
title="What pet do you prefer?"
answers=[
"A dog",
"A cat"
]
/>
<Question
changeAnswer={changeAnswer}
title="What color do you want your pet to be?"
answers=[
"red",
"green"
]
/>
<Button
title="Show image!"
onPress={getImage}
/>
{image &&
<Image src={image} />
}
</View>
)
}
Try to experiment and see where it gets you and what you can learn! The most important part when learning a new technology is to experiment.
Just out of curiosity, are you using expo to run your react native app?

I hope you will enjoy learning about Reactjs and the world of Javascript.
Firstly, I've noticed that you have tagged both Reactjs and React-native. Syntactically they are almost the same, but one is used to render to native platform UI to display as apps on smartphones, and the other is used for HTML DOM to display in internet browsers.
Nevertheless, I have made an example for you in Reactjs. Now React-native does not use the HTML dom (which is what is rendered in the example), but the logic will be somewhat the same!

Firebase DB- How to read particular value of child in Firebase Database [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
This is how my Databse looks:
I want to read the value of field state using Node js

If you are using client-SDK then you can do following. Same applies to admin SDK but few initializations will differ.
I am taking rooms node as parent node
import * as firebase from 'firebase/app';
import 'firebase/database';
const firebaseApp = firebase.initializeApp(firebaseConfig);
const dbRootRef = firebaseApp.database().ref();
dbRootRef.child(`Rooms/${your_rooom_id}/roomdetails/01/1/appliance/0/state`)
.once('value')
.then((snapshot) => {
const snapshotValue = snapshot.val();
return snapshotValue; // note that db will return null if no value found or node does not exist
});
This is very simple and you can find that in official firebase documentation. So before posting basic questions you should search on google

React events handling, best practice [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I am using React and I have old-style kind of code for handling some events:
componentDidMount = () => {
document.addEventListener('mousedown', this.handleClick);
}
componentWillUnmount = () => {
document.removeEventListener('mousedown', this.handleClick);
}
Is it the right way of setting up event handlers in React? I mean best practice. How would you refactor the above code in the React - way of doing things? I understand when we set up events on individual elements, but I am confused in this particular case.

Ideally in React, you never edit the DOM yourself. You should only update the virtual DOM and then let React handle changes to the DOM.
It seems like you want to call this.handleClick() when any part of the document is clicked. One way you could handle that in the "React" way is to add an onClick prop to a container within like so...
class App extends Component {
constructor() {
this.handleClick = this.handleClick.bind(this);
}
render() {
return (
<div className="container" onClick={this.handleClick}=>
//...the rest of your app
</div>
)
}
}
And then make sure that the margins/padding is set in such a way to make sure that your div covers the whole page.

In react you should not bind eventListeners directly to the DOM as react provides synthetic events which can be and should be used and let react handle the rest.
For more details on Synthetic Events here are the React docs
So in your component you can have pass the parameter to your component onMouseDown and handler its click handler something like:
class SomeClass extends Component {
constructor(props) {
super(props)
this.mouseDownHandler = this.mouseDownHandler.bind(this)
}
mouseDownHandler() {
// do something
}
render() {
return (
<div
onMouseDown={this.mouseDownHandler}
>
</div>
)
}
}
Hope this helps.

Is it the right way of setting up event handlers in React?
What you are doing is perfectly fine.
How would you refactor the above code in the React - way of doing things?
Ideally, you would use the React provided DOM Events when possible, but since this is a global document click listener then your code is correct.