Develop Reference

Display Search icon inside search box , throws error in react

I was trying to add search icon inside search box here's my code so far :
<div className='search'>
<input
id="quick_search"
className="xs-hide"
name="quick_search"
placeholder="Search by creator, collectible or collection."
type="text"
onChange={(e) => {
changeKey(e);
}}
onKeyDown={keyPress}
value={keyword}
>
<i class="fa fa-search" aria-hidden="true"></i>
</input>
</div>
i face this Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
can anyone help me with this ? much appreciated !
thanks

React's input element the same as HTML's input element can't have children.
You have to make the icon appear in the input box using CSS, you can't place it as a child.
.form-field {
position: relative;
display: inline-block;
}
.icon {
position: absolute;
right: 0;
}
<div class="form-field">
<input>
<span class="icon">🔍</span>
</div>
Also, you didn't close the <input> tag. It's wrong because every tag in react has to be closed either by using the closing tag </input> or using a self-closing tag <input />
You code should probably look like this:
<div className='search'>
<input
id="quick_search"
className="xs-hide"
name="quick_search"
placeholder="Search by creator, collectible or collection."
type="text"
onChange={(e) => {
changeKey(e);
}}
onKeyDown={keyPress}
value={keyword}
/> {/* <--- notice `/` here */}
<i class="fa fa-search" aria-hidden="true"></i>
</div>

How I can change a Button into a input text?

So, I'm trying to create a button that when I click it, it should change into a input with a another button for submit. I'm using react and bootstrap.
<div className="cold-md-2 col-sm-3">
<div className="card-body">
<button class="btn btn-lg btn-block btn-group py-3" type="button">New group
<i class="fas fa-plus"></i></button>
</div>
</div>

You should probably create a state indicating wheter should render a button or an input, then on your render you check wich one you should render.
export default class Test extends PureComponent {
constructor(props) {
super(props);
this.state = {
type: 'button'
};
}
toggleType() {
this.setState({
type: this.state.type === 'button' ? 'input' : 'button'
});
}
render() {
if (this.state.type === 'input')
return <span>In here its the input HTML</span>;
return (
<button onClick={this.toggleType.bind(this)} type="button">Toggle</button>
);
}
}

To change the text of a button that has been declared with <input type="button"> tag: use the button's value property. For example:
<input type="button" value="Button Text" id="myButton">Submit</input>

Ability to toggle True/False with ( v-if ) in the loop

I am asking about hiding and showing an element in Vue.js
I always use this
<ele v-if="value" />
and then set {value} in Vue Instance data object, then toggle True/False for toggle visible, but now in my situation , my v-if condition put in some element , then this element create with v-for directive
some thing like this
<div v-for="item in items" >
<ele v-if="value" :key="item.i" />
<ele v-if="value" :key="item.i" />
<ele v-if="value" :key="item.i" />
// this button fire a method for Change (toggle) value (used for v-if)
<button #click="ToggleValue" > update </button>
</div>
In my view i have a table contain some rows and each rows have some field ( all field have v-if directive ) and in each rows we have button for fire method
Now what is my question ?!!
At the end my table is doing this , when click on every button ToggleValue method execute and toggle value of (value) object , now all field in all rows change the value ( all thing doing right :D )
but I want click on every button in each row just change the value of that row
I have dummy way
< ele v-if="value(item.id)" />
.........
.........
<button #click="ToggleValue(itme.id)" >
if my index of loop is Const and static I use this way , but now items in loop are dynamic
all thing was in my pen at here , thanks for give me your time
https://codepen.io/hamidrezanikoonia/pen/OQGrPB?editors=1100

Instead of having a single value, turn value into an object (or array) and index it by item.id.
Updated codepen: https://codepen.io/acdcjunior/pen/MQRZmK?editors=1010
In your pen, the JavaScript:
...
],
update_:false
},
methods: {
set_update() {
this.update_ = !this.update_;
}
}
becomes:
...
]
update_: {1: false, 2: false, 3: false}
},
methods: {
set_update(id) {
this.update_[id] = !this.update_[id];
}
}
And the template:
<td :key="getValue.id+4" v-if="update_" mode="in-out" > {{ getValue.rate_curr }} </td>
...
<button #click="set_update()" type="button" class="btn btn-primary"> Update </button>
becomes:
<td :key="getValue.id+4" v-if="update_[getValue.id]" mode="in-out" > {{ getValue.rate_curr }} </td>
...
<button #click="set_update(getValue.id)" type="button" class="btn btn-primary"> Update </button>

ReactJS - state not updated or has not effect?

I'm creating so called recipe box, where you should be able to add/edit/delete recipes. Initial rendering part seems to be working fine, but I'm struggling when it comes to states and updating html depending what was changed: whether existing recipe was modified, deleted or new one added.
Currently I implemented state change trigger when recipe is edited. By reading various articles I came to conclusion that if you want to read values from another element when some other element is interacted (in my case from input element when button element is clicked), I need to add state to track input directly while it is typed and then use that state to trigger what I want (In my case I just use value from so called pending state and set to normal state when that button is pressed).
But it seems it is not working. Though I'm probably doing something wrong.
Here is the part I implemented states I talked about:
class RecipeComponent extends React.Component {
constructor(props){
super(props);
this.state = {
title: '',
pendingTitle: '',
ingredients: '',
pendingIngredients: '',
}
}
handleChange(e, key){
let obj = {};
obj[key] = e.target.value;
this.setState(obj);
}
handleClick(){
this.setState(
{title: this.pendingTitle, ingredients: this.pendingIngredients});
}
_renderModal(target, ctx){
return (
<div className="modal fade" id={target} role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">{ctx.title}</h4>
</div>
<div className="modal-body">
<div className="form-group">
<label htmlFor="title" className="control-label"><span>Recipe</span></label>
<input type="text" id="title" className="form-control" placeholder="Recipe Name" defaultValue={ctx.recipeTitle ? ctx.recipeTitle : ''}
onKeyUp={(e) => this.handleChange(e, 'pendingTitle')}
/>
</div>
<div className="form-group">
<label htmlFor="ingredients" className="control-label"><span>Ingredients</span></label>
<input type="text" id="ingredients" className="form-control" placeholder="Enter Ingredients, separated by commas" defaultValue={ctx.ingredients ? ctx.ingredients : ''}
onChange={(e) => this.handleChange(e, 'pendingIngredients')}
/>
</div>
</div>
<div className="modal-footer">
{/*Seems to not update state properly*/}
<button type="button" className="btn btn-primary" onClick={() => this.handleClick()} data-dismiss="modal">{ctx.title}</button>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
);
}
...
...
{/*Here title from state is never set*/}
// Should this.state.title replace default title?
recipeTitle: this.state.title || recipe.title,
}
Full code can be found here (you can also test how it is currently working if it was hard to understand what I meant. Try to open any recipe, edit it and press button Edit Recipe and nothing will happen, recipe title will not be changed): https://codepen.io/andriusl/pen/LjxYQo

You directly accessed this.pendingTitle instead of this.state.pendingTitle. so change this to
handleClick(){
this.setState(
{title: this.state.pendingTitle, ingredients: this.state.pendingIngredients});
}
and change this code to
<a data-toggle="collapse" data-target={anchor_target}
href={anchor_target} className="collapsed">{this.state.title||recipe.title}

How do you stop an ember action from triggering on it's child elements / how to access events in actions

I know you can add bubbles=false to actions to stop propagation to parent elements, but how do you stop an action from getting called on it's child elements?
I'm trying to create an overlay to my site, which has a transparent background overlay-bg, a close button and some overlay-content. Each of these elements should be clickable to hide the overlay. But whenever I click the popup (which is restricted to a width of 400px inside the overlay-content) or the form elements inside the popup, etc... the hide method is still being called. The other actions on my form, etc are also being called at the same time.
My initial thought, a way I've done this with jQuery, is to use the event to determine if the clicked element has a class on it like canClose, so that if a child element is clicked the function would return before completion... but I can seem to figure out how to access an event object from the action. I tried returning this as a parameter of the action, but that just returns the ember component itself and not the element that was clicked.
Component:
App.OverlayComponent = Ember.Component.extend({
elementId: 'login-overlay',
// ...
actions: {
// ...
hide: function () {
var view = this;
view.set('showing', false);
view.$().one(Ember.$.support.transition.end, function () {
view.destroy();
});
}
},
});
Template:
<div class="overlay-bg" {{action 'hide'}}></div>
<a href="#" class="close" {{action 'hide'}}>×</a>
<div class="overlay-content" {{action 'hide' this}}>
<div class="popup">
<h1>Login</h1>
<form {{action 'login' on='submit'}}>
<label for="username">Username</label>
{{input value=username id="username" placeholder="Your email address" classNameBindings='usernameError:error'}}
<label for="password">Password</label>
{{input type="password" value=password id="password" placeholder="Password" classNameBindings='passwordError:error'}}
<button class="btn btn-primary" {{action 'login'}}>Login</button>
<p class="text-center forgot"><a href="#" {{action 'forgot'}}>Forgot Password?</a></p>
</form>
<hr>
<p class="mb0 text-center"></i> Login with Facebook</p>
</div>
<p class="text-center signup">Don't have an account? <a href="#" {{action 'signup'}}>Signup</a></p>
</div>
UPDATE:
Forgot to mention, I also tried adding e to my hide function and inside the handlebars helper in the template (hide: function (e) {} and {{action 'hide' event}}) but when I log e it's undefined.
Also, I'm using Ember 1.0.0... do I need to update to a newer version to get access to events in my actions?

I had this exact problem. I kept the action on the bg layer and removed it from the parent element, i.e.
<div class="overlay-bg" {{ action 'hide' }}></div>
<div class="overlay-content">...</div>
If you had the action on .overlay-content because it covers .overlay-bg, you may need
.overlay-content {
pointer-events: none;
}
.overlay-content > * {
pointer-events: all;
}