Develop Reference

Search input loses focus when it doesn't find any title

Whenever I try to search, I can type only the letters which are similar to the one of the titles. If any letter is different I lose focus from input. It used to work normally before, but Idk what happened now. Any suggestions?
How it first looks like:
After starting to type on search input:
When I type a letter which is not in the title:
Code:
if (props.items.length === 0) {
return (
<div className="files-list center">
<Card>
<h2>No files found.</h2>
</Card>
</div>
);
} else if (
props.items.filter(
(file) =>
file.title.toLowerCase().includes(searchInput) ||
file.title.toUpperCase().includes(searchInput)
).length === 0
) {
return (
<div className="filesList">
<div className="search">
<input
type="text"
placeholder="Search Files"
onChange={(event) => setSearchInput(event.target.value)}
/>
</div>
<Card>
<h2>No files found.</h2>
</Card>
</div>
);
}
return (
<React.Fragment>
<div className="filesList">
<div className="actionsBtn">
<NavLink to="/add-file" className="addFileBtn" title="Add File">
<FontAwesomeIcon icon={faPlus} />
</NavLink>
<input
type="text"
placeholder="Search Files"
onChange={(event) => setSearchInput(event.target.value)}
/>
</div>
<ul className="files-list">
{props.items
.filter(
(file) =>
file.title.toLowerCase().includes(searchInput) ||
file.title.toUpperCase().includes(searchInput)
)
.map((file) => (
<FilesPostItem
key={file.id}
id={file.id}
title={file.title}
file={file.file}
creator={file.creator.name}
description={file.description}
creatorId={file.creator}
onDelete={props.onDeleteFile}
/>
))}
</ul>
</div>
</React.Fragment>
);

What I think happens is, your “default” return form the beginning gets reset by the return in the “if else”. So the Input is a new DOM Element and loses focus.
You might want to add something like this to your default return and remove your "if else" statement.
<ul className="files-list">
{props.items
.filter(
(file) =>
file.title.toLowerCase().includes(searchInput) ||
file.title.toUpperCase().includes(searchInput)
)
.map((file) => (
<FilesPostItem
key={file.id}
id={file.id}
title={file.title}
file={file.file}
creator={file.creator.name}
description={file.description}
creatorId={file.creator}
onDelete={props.onDeleteFile}
/>
))}
</ul>
{props.items
.filter(
(file) =>
file.title.toLowerCase().includes(searchInput) ||
file.title.toUpperCase().includes(searchInput)
).length > 0 &&
<Card>
<h2>No files found.</h2>
</Card>
}
What does this do?
It adds the "No files found" message to your default return and shows it only, if items is empty.
But i am pretty sure, there is a better way to do this.

I am working on the currency converter webapp with the fixer api

I have successfully fetched all the values. But i want to populate all of the values {currencyOptions} into the "select" option which is in the another component. How can I do that .
const [currencyOptions, setCurrencyOptions] = useState([]);
console.log(currencyOptions);
<div className="App">
<h1>Convert Currency</h1>
<CurrencyRow currencyOptions={currencyOptions} />
<SiConvertio className="convert" />
<CurrencyRow currencyOptions={currencyOptions} />
</div>
Here is the currency option component which I
const CurrencyRow = () => {
return (
//
<Container>
<Row>
<Input type="number" className="input" />
<select>
<option value="abx">abc</option>
</select>
</Row>
</Container>
);
};

You want to populate your dropdown with your currencyOptions state. Assuming your state has all the items and it's a list you want to return an option element for each item when rendering your component, something like:
currencyOptions.map((currencyOption, index) => (
<option key={index} value={currencyOption}>{currencyOption}</option>
));
Also try to use an id as the element key instead of the index if you have got one.

react radio button doesn't work on the first click

I have a radio button using pure css, but it doesn't work on first click, it only work on the second click onward, not sure it has to do with my react prop or not:
const Radio = ({ id, name, value, checked, children }) => (
<div className="radioBtn">
<input type="radio" value={value} id={id} name={name} checked={checked} />
<label className={"radio"} htmlFor={id}>
<span className={"big"}>
<span className={"small"} />
</span>
<span>{children}</span>
</label>
</div>
);
https://codesandbox.io/s/react-sass-34b8w

Use defaultChecked instead of checked={checked}.

How to display multiple varied states for multiple radio groups?

Currently using Semantic-UI-React in a form, and want to use multiple Radio sections in said form. In the SUIR example code, the selected radio button displays as a title via state, however I want to have multiple groupings of radio selection options that show the corresponding selected button value. How do I change the current writing for state to be able to reflect ONLY the selected radio value for the option grouping it is apart of?
I have tried adding and id attribute to the Radio element, and then changed the display title from {this.state.value} to {this.id.state.value}, but of course that does not work.
// Here is my state declaration:
state = {};
handleChange = (e, { value }) => this.setState({ value });
// The display title:
<Form.Field>
Category:
<b style={{ marginLeft: 20 }}>{this.state.value}</b>
</Form.Field>
//Grid row that displays the various radio options:
<Grid.Row id="Category" columns={4}>
<Grid.Column>
<Radio
label="Health & Wellness"
name="radioGroup"
value="Health & Wellness"
checked={this.state.value === "Health & Wellness"}
onChange={this.handleChange}
/>
</Grid.Column>
<Grid.Column>
<Radio
label="Finance"
name="radioGroup"
value="Finance"
checked={this.state.value === "Finance"}
onChange={this.handleChange}
/>
</Grid.Column>
<Grid.Column>
<Radio
label="Culture"
name="radioGroup"
value="Culture"
checked={this.state.value === "Culture"}
onChange={this.handleChange}
/>
</Grid.Column>
<Grid.Column>
<Radio
label="Other"
name="radioGroup"
value="Other"
checked={this.state.value === "Other"}
onChange={this.handleChange}
/>
</Grid.Column>
</Grid.Row>
This is copy and pasted again beneath for an additional radio grouping.
I expect the first to reference the relative selected value, and the second in the additional group to do the same, however when selecting any radio button in either group, the state reflects the selection value in both elements.

Use the name of each group as a property in state
state = {group1: null, group2: null};
handleChange = (e, {name, value }) => this.setState({[name]: value });
Two different group items:
/* group 1 */
<Grid.Column>
<Radio
label="Finance"
name="group1"
value="Finance"
checked={this.state.group1 === "Finance"}
onChange={this.handleChange}
/>
</Grid.Column>
/* group2 */
<Grid.Column>
<Radio
label="Culture"
name="group2"
value="Culture"
checked={this.state.group2 === "Culture"}
onChange={this.handleChange}
/>
</Grid.Column>

How to set a defaultChecked to only first input in radio button when using map function in reactjs

I am trying to use defaultChecked in reactjs when using map function to only one radio button. But How can I acomplish it?
{colors.map((color, index) => {
return (
<label className="color-checkmark" key={index}>
<input
type="radio"
checked="checked"
name="color"
value={color}
// defaultChecked
/>
</label>
);
})}
If I use defaultChecked there it will be set to every radio button.

You need to remove the checked="checked" attribute as it conflicts with the defaultChecked attribute. And then add defaultChecked={index === 0}

If you want the first item checked
{colors.map((color, index) => {
return (
<label className="color-checkmark" key={index}>
<input
type="radio"
name="color"
value={color}
defaultChecked={!(!!index)}
/>
</label>
);
})}
what does !! do?
the !! ensures that the value will always be a boolean or converted to a boolean.

You need to add a condition to your defaultChecked, and remove the checked property:
const colors = ['blue', 'green', 'red']
function App() {
return colors.map((color, index) => (
<label key={index}>
<input
type="radio"
name="color"
value={color}
defaultChecked={index === 0}
/>
<span style={{color}}>{color}</span>
</label>
))
}
ReactDOM.render(<App />, document.getElementById('app'))
<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="app">euoeu</div>