how to add classname on event.target-Js/ReactJs - javascript

I have an onclick handler:
render() {
return (
<div>
<div className={className} onClick={this.target.bind(this,id)}>{name}</div>
</div>
)
}
and here is the function:
target(test, event) {
event.target.className="addClasss";
}
I was trying the above way to addClass on event target, however is there a better way to do this?
Thanks

Instead of adding a class manually to a DOM element, you can e.g. add an additional state variable that keeps track of the element that has been clicked. You can then use this in the render method to choose which element that should get the class added to it.
Example
class App extends React.Component {
state = {
arr: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }],
clicked: null
};
target(id) {
this.setState({ clicked: id });
}
render() {
const { arr, clicked } = this.state;
return (
<div>
{arr.map(element => (
<div
className={clicked === element.id && "addClass"}
onClick={this.target.bind(this, element.id)}
>
{element.name} {clicked === element.id && "clicked!"}
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

class App extends React.Component {
state = {
clicked: false,
};
handleClick = () => {
this.setState({ clicked: true });
}
render() {
const { clicked } = this.state;
const className = clicked ? "newClass" : "";
const name = "add newClass";
return (
<div>
<div className={className} onClick={this.handleClick}>{name}</div>
</div>
);
}
}

A little late but for future searchers: use jquery:
target(test, event) {
var element = $(event.target)
element.addClass('your class');
}
OBS: I agree partially with the answers above, react was made to work with states but there are some cases that we don't want to care about controlling every single aspect of our code with states, specially when there are a repetitive class, so I found easier to target these elements with jquery.

Related

Remove element from array with onClick and react

I'm very new to JS and React and coding in general. I'm trying to remove an item from an array using onClick, like so:
const { Component } = React;
class Board extends Component{
constructor(props) {
super(props);
this.state = {
comments: [
'I like Rosie',
'I like you',
'I like bacon',
'lalalala'
],
}
}
removeComment = (e) =>{
var filteredArray = this.state.comments.filter(item => item !== e.target.value)
this.setState({comments: filteredArray});
console.log(e.target.value)
}
eachComment = (text, i) => {
return ( <p id={i} key={i} > comment: {text} {i}</p> )
}
render(){
console.log('render');
return (
<div className="gif-list" onClick={this.removeComment}>
{this.state.comments.map(this.eachComment)}
</div>
);
}
}
ReactDOM.render(
<Board/>,
document.querySelector('#mount'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="mount"><div>
Not much is happening though. My console.log(e.target.value) comes back as undefined. What am I doing wrong?
I have tried looking at other answers but implementing (to me) abstract solutions to other similar problems is not working for me.
Thanks in advance, and apologies for such a simple question.
The div you have the event handler on does not have a value attribute. But even if it did I don't think it will do what you want.
You'll need to change your code a bit in order to get it working like you want:
class Board extends React.Component{
constructor(props) {
super(props);
this.state = {
comments: [
'I like Rosie',
'I like you',
'I like bacon',
'lalalala'
],
}
}
removeComment = (e) =>{
// Check the index in the filter to see if it should be kept or removed
var filteredArray = this.state.comments.filter((item, i) => i != e.target.id)
this.setState({comments: filteredArray});
console.log(e.target.id)
}
eachComment = (text, i) => {
// Move the event handler to be on each item
return ( <p id={i} key={i} onClick={this.removeComment}> comment: {text} {i}</p> )
}
render(){
return (
<div className="gif-list">
{this.state.comments.map(this.eachComment)}
</div>
);
}
}
ReactDOM.render(<Board />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />
You'll notice the important changes are:
Give the remove handler to each mapped element
Use an attribute from the event target that actually exists and can be used to determine which element should be removed.
For this one you need to specifically pass in the param when you bind the onClick function
return (
<div className="gif-list" onClick={(e)=>this.removeComment(e)}>
{this.state.comments.map(this.eachComment)}
</div>
);

reactjs - Render single icon on hover for list item rendered from array

I have this sort of cards that are rendered from an array of objects.
Parent Component:
[{foo: 'bar', baz: [{ name: string, path: string: '/'}]
state = {isHovering: false}
handleMouseHover = () => {
const { isHovering } = this.state;
this.setState({ isHovering: !isHovering });
}
;
I'm passing down handleMouseHover() and isHovering down as props to a child component.
Resulting in something like this:
Child Component
<LinkContainer
onMouseEnter={handleMouseHover}
onMouseLeave={handleMouseHover}
className="linkContainer"
>
{isHovering && (
<FontAwesomeIcon
icon="copy"
className="copyIcon"
onClick={copyToClipboard}
/>
)}
The result is 4 cards that contain 3 links. Each time I hover over a link I want the copy to clipboard icon to show. However, at the moment when I hover over any item it sets isHovering to true thus making all the icons visible. Ideally I just want the the icon for the link I hover over to become visible. Can someone help me to figure out a better solution or a refinement of my already written code.
Much appreciated!
You could keep an object in your state instead of a boolean, that has a key indicating if the object with that particular key as index is hovered or not.
Example
class App extends React.Component {
state = {
arr: [{ text: "foo" }, { text: "bar" }],
isHovered: {}
};
handleMouseEnter = index => {
this.setState(prevState => {
return { isHovered: { ...prevState.isHovered, [index]: true } };
});
};
handleMouseLeave = index => {
this.setState(prevState => {
return { isHovered: { ...prevState.isHovered, [index]: false } };
});
};
render() {
const { arr, isHovered } = this.state;
return (
<div>
{arr.map((el, index) => (
<Child
onMouseEnter={() => this.handleMouseEnter(index)}
onMouseLeave={() => this.handleMouseLeave(index)}
text={el.text}
isHovering={isHovered[index]}
key={index}
/>
))}
</div>
);
}
}
function Child({ onMouseEnter, onMouseLeave, text, isHovering }) {
return (
<div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
{text} {isHovering && " (hovering!)"}
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
Create a property isHovered on item of an array dynamically and onMouseHover pass the item which you get in .map, now toggle the isHovered property. Should work now.

div's id attribute is undefined/not getting captured onClick in a react app

I'm mapping data from the api response and rendering multiple divs out of it. Along with that I'm assigning a unique id from the response to the id attribute of each div like this:
...lists.map(list => {
return (
<div className='one' key={list.id} id={list.id} onClick={this.handleClick}>
<div className='two'>
<p>Hello World</p>
<span>Foo Bar</span>
</div>
</div>
)
})
handleClick = (e) => {
console.log(e.target.id)
// other stuff
}
The Problem:
Whenever the outer div (className='one') is clicked the console logs undefined. However, if I assign the id value to the inner div (className='two') it logs the value of id only if the click is made within the dimensions of the inner div. Same is the case with the <span> and <p> tags.
Basically, the onClick returns a different target on clicking different html elements.
Expected result:
Clicking the parent div or anywhere inside that div should always return the value of the id attribute of the parent div.
The thing is when you define onClick on the topMost parent, you need to use e.currentTarget.id instead of e.target.id since e.target will give you the element on which you clicked rather then the parent on which onClick listener is defined
class App extends React.Component {
state = {
lists: [{id: 1}, {id: 2}, {id:3}]
}
render() {
return (
<div>
{this.state.lists.map(list => {
console.log(list.id)
return (
<div className='one' key={list.id} id={list.id} onClick={this.handleClick}>
<div className='two'>
<p>Hello World</p>
<span>Foo Bar</span>
</div>
</div>
)
})
}
</div>
)
}
handleClick = (e) => {
console.log(e.currentTarget.id)
// other stuff
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>
Ok, the problem isn't Reactjs, the problem is the event target.
You are using e.target when you have to use event.currentTarget, here is the difference.
target is the element that triggered the event (e.g., the user clicked on)
currentTarget is the element that the event listener is attached to.
Let see this in an example:
let tacos = [{
person: "John",
ingredient: 'Guacamole'
}, {
person: 'Sally',
ingredient: 'Beef'
}];
class App extends React.Component {
render() {
return (
<div>
<h3>List of tacos:</h3>
<TacosList tacos={tacos} />
</div>
);
}
}
class TacosList extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
const currentTarget = event.currentTarget;
console.log(event.target);
console.log(currentTarget.id);
}
render() {
return (
<div>
{this.props.tacos.map((taco, index) => (
<div className="one" id={`reference-${index}`} key={index} onClick={this.handleClick}>
<p>{taco.person}: {taco.ingredient}</p>
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
.one {
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
</div>
Note that you can click on the div and p element and both will trigger the event, in the case of p it will propagate the event up to the div , therefore, it's when the event target changes
In the constructor, just put this line:
constructor() {
this.handleClick = this.handleClick.bind(this);
}
After this, you will be able to access the ref to the element,
For more detail please go through this link :
https://reactjs.org/docs/handling-events.html
try to set event as function param
handleClick = (e) => {
console.log(e.target.id)
// other stuff
}
if you are already using ES6
I would change the code a bit, so it will easier to understand and work with no special glitches with events target and attributes
lists.map(list => {
return (
<div
className='one'
key={list.id}
onClick={this.handleClick.bind(this, list.id)
<div className='two'>
<p>Hello World</p>
<span>Foo Bar</span>
</div>
</div>
)
})
handleClick = (listId) => {
console.log(listId)
// other stuff
}
as you can see here, I just call the method with the list id and I'm done

Add class to siblings when Component clicked in React

I'm working on building my portfolio using React.js. In one section, I have four components laid out in a grid. What I want to do achieve is when one component is clicked, a css class is added to the siblings of this component so that their opacity is reduced and only the clicked component remains. In jQuery, it would be something like $('.component').on('click', function(){ $(this).siblings.addClass('fadeAway')}). How can I achieve this effect? Here is my code, thanks in advance for any and all help!
class Parent extends Component{
constructor(){
super();
this.state = {fadeAway: false}
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
//Add class to siblings
}
render(){
const array = ["Hello", "Hi", "How's it going", "Good Times"]
return(
array.map(function(obj, index){
<Child text={obj} key={index} onClick={() => this.handleClick} />
})
)
}
}
A working example for this problem could look something like this, with a marginally more complex initialization array:
class Parent extends Component{
constructor(){
super();
this.state = {
elements: [
{
id: "hello",
text: "Hello",
reduced: false,
},
{
id: "hi",
text: "Hi",
reduced: false,
}
{
id: "howsItGoing"
text: "How's it going",
reduced: false,
}
{
id: "goodTimes",
text: "Good Times",
reduced: false,
}
],
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(e){
// copy elements from state
const elements = JSON.parse(JSON.stringify(elements));
const newElements = elements.map(element => {
if (element.id === e.target.id) {
element.reduced = false;
} else {
element.reduced = true;
}
});
this.setState({
elements: newElements,
});
}
render(){
return(
this.state.elements.map(function(obj, index){
<Child
id={obj.id}
text={obj.text}
reduced={obj.reduced}
key={index}
onClick={() => this.handleClick} />
});
);
}
}
Then you would just add a ternary, like so, to the Child component:
<Child
id={this.props.id}
className={this.props.reduced ? "reduced" : ""} />
This adds a bit more boilerplate than other examples, but it's extremely brittle to tie business logic to the text inside a component, and a stronger solution requires a stronger piece of identification, like an ID or class on the rendered DOM element. This solution also, if you so wish, easily allows you to expand your logic so that more than one element can remain at maximum opacity at once.
I would simply store in state index of selected item, and then pass fadeAway prop into Child component defined as
fadeAway={this.state.selectedIndex !== index}
After that you only need to set a fade-away class in Child based on this.prop.fadeAway and define necessary CSS rules.
Here is how it could look in your case:
class Parent extends React.Component{
constructor () {
super();
this.state = {selectedIndex: null}
}
handleClick (selectedIndex) {
this.setState({ selectedIndex })
}
render () {
const array = ["Hello", "Hi", "How's it going", "Good Times"]
return (
<div>
{array.map((obj, index) => {
const faded = this.state.selectedIndex && this.state.selectedIndex !== index
return <Child
text={obj}
fadeAway={faded}
key={index}
onClick={() => this.handleClick(index)} />
})}
</div>
)
}
}
class Child extends React.Component {
render () {
return (
<h2
onClick={this.props.onClick}
className={this.props.fadeAway ? 'fade-away' : ''}>
{this.props.text}
</h2>
)
}
}
ReactDOM.render(
<Parent />,
document.body
);
.fade-away {
opacity: 0.3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
You can achieve that using using a toggle variable :
handleClick(){
this.setState({fadeAway} => ({
fadeAway: ! fadeAway
)};
}
...
<Child
text={obj}
key={index}
onClick={() => this.handleClick}
className={this.state.fadeAway? 'class1' : 'class2'}/>
I perfer use state like currentWord to save the word was clicked in Parent component, presudo code is like below:
class Parent extends Component {
constructor(){
super();
this.state = {
fadeAway: false,
currentWord: ''
};
this.handleClick = this.handleClick.bind(this)
}
handleClick(currentWord){
this.setState({
currentWord: currentWord,
});
}
render(){
const array = ["Hello", "Hi", "How's it going", "Good Times"]
const currentWord = this.state.currentWord;
return(
array.map(function(obj, index){
<Child currentWord={currentWord} text={obj} key={index} onClick={() => this.handleClick} />
})
)
}
}
And in Child component
class Child extends Component {
// some other code
handleClick(e) {
this.props.handleClick(e.target.value);
}
render() {
const isSelected = this.props.text === this.props.currentWord;
// use isSelected to toggle className
<div
onClick={this.handleClick.bind(this)}
>{this.props.text}
</div>
}
}

ReactJS clearing an input from parent component

I'm teaching myself react with a super simple app that asks the user to type a word presented in the UI. If user enters it correctly, the app shows another word, and so on.
I've got it almost working, except for one thing: after a word is entered correctly, I need to clear the input element. I've seen several answers here about how an input element can clear itself, but I need to clear it from the component that contains it, because that's where the input is checked...
// the app
class AppComponent extends React.Component {
constructor() {
super();
this.state = {
words: ['alpha', 'bravo', 'charlie'],
index: 0
};
}
renderWordsource() {
const word = this.state.words[this.state.index];
return <WordsourceComponent value={ word } />;
}
renderWordinput() {
return <WordinputComponent id={1} onChange={ this.onChange.bind(this) }/>;
}
onChange(id, value) {
const word = this.state.words[this.state.index];
if (word == value) {
alert('yes');
var nextIndex = (this.state.index == this.state.words.count-1)? 0 : this.state.index+1;
this.setState({ words:this.state.words, index:nextIndex });
}
}
render() {
return (
<div className="index">
<div>{this.renderWordsource()}</div>
<div>{this.renderWordinput()}</div>
</div>
);
}
}
// the input component
class WordinputComponent extends React.Component {
constructor(props) {
this.state = { text:''}
}
handleChange(event) {
var text = event.target.value;
this.props.onChange(this.props.id, text);
}
render() {
return (
<div className="wordinput-component">
<input type="text" onChange={this.handleChange.bind(this)} />
</div>
);
}
}
See where it says alert('yes')? That's where I think I should clear the value, but that doesn't make any sense because it's a parameter, not really the state of the component. Should I have the component pass itself to the change function? Maybe then I could alter it's state, but that sounds like a bad idea design-wise.
The 2 common ways of doing this is controlling the value through state in the parent or using a ref to clear the value. Added examples of both
The first one is using a ref and putting a function in the child component to clear
The second one is using state of the parent component and a controlled input field to clear it
class ParentComponent1 extends React.Component {
state = {
input2Value: ''
}
clearInput1() {
this.input1.clear();
}
clearInput2() {
this.setState({
input2Value: ''
});
}
handleInput2Change(evt) {
this.setState({
input2Value: evt.target.value
});
}
render() {
return (
<div>
<ChildComponent1 ref={input1 => this.input1 = input1}/>
<button onClick={this.clearInput1.bind(this)}>Clear</button>
<ChildComponent2 value={this.state.input2Value} onChange={this.handleInput2Change.bind(this)}/>
<button onClick={this.clearInput2.bind(this)}>Clear</button>
</div>
);
}
}
class ChildComponent1 extends React.Component {
clear() {
this.input.value = '';
}
render() {
return (
<input ref={input => this.input = input} />
);
}
}
class ChildComponent2 extends React.Component {
render() {
return (
<input value={this.props.value} onChange={this.props.onChange} />
);
}
}
ReactDOM.render(<ParentComponent1 />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
I had a similar issue: I wanted to clear a form which contained multiple fields.
While the two solutions by #noveyak are working fine, I want to share a different idea, which gives me the ability to partition the responsibility between parent and child: parent knows when to clear the form, and the items know how to react to that, without using refs.
The idea is to use a revision counter which gets incremented each time Clear is pressed and to react to changes of this counter in children.
In the example below there are three quite simple children reacting to the Clear button.
class ParentComponent extends React.Component {
state = {revision: 0}
clearInput = () => {
this.setState((prev) => ({revision: prev.revision+1}))
}
render() {
return (
<div>
<ChildComponent revision={this.state.revision}/>
<ChildComponent revision={this.state.revision}/>
<ChildComponent revision={this.state.revision}/>
<button onClick={this.clearInput.bind(this)}>Clear</button>
</div>
);
}
}
class ChildComponent extends React.Component {
state = {value: ''}
componentWillReceiveProps(nextProps){
if(this.props.revision != nextProps.revision){
this.setState({value : ''});
}
}
saveValue = (event) => {
this.setState({value: event.target.value})
}
render() {
return (
<input value={this.state.value} onChange={this.saveValue} />
);
}
}
ReactDOM.render(<ParentComponent />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
EDIT:
I've just stumbled upon this beautifully simple solution with key which is somewhat similar in spirit (you can pass parents's revision as child's key)
Very very very simple solution to clear form is add unique key in div under which you want to render form from your child component key={new Date().getTime()}:
render(){
return(
<div className="form_first_step fields_black" key={new Date().getTime()}>
<Form
className="first_step">
// form fields coming from child component
<AddressInfo />
</div>
</Form>
</div>
)
}

Categories