erwin6997/baby-names-react

Baby Name

Hi there 👋

I'm Meisam Erwin Zarghani 🧑‍💻

📘 Linkedin 📪 Email 🖥️ Personal web.

I am a quick learner and easily adapt to different hats (Full Stack Web Developer 🌐, Software Developer ) depending on what the project requires. I love exploring new tech stack 💻 and leveraging them to build cool stuffs 🛠️.

🧐 More About Me:

• 🔭 I’m currently working on React Framework.
• 🌱 I’m currently learning Artificial Intelligent.
• 💻 Most of my work are available on [GitHub].
• 💬 Ask me about anything tech related, I am happy to help.
• 📫 Feel free to ping me on LinkedIn.
• 📚 When I am free, I love to play Guitar 🎸.

🔨 Languages and Tools:

• JavaScript
• Node JS
• CSS & SCSS
• HTML5
• MongoDB
• SQL Server
• PHP
• SAPUI5
• SAP HANA

Loc 🏴󠁧󠁢󠁥󠁮󠁧󠁿

baby-names-react's Issues

`babyName` and `setBabyName` variable names are confusing

They refer to multiple names so they should be plural, no?

baby-names-react/src/App.js

Line 14 in d8643ba

const [babyName, setBabyName] = useState ([])

`names` variable name is confusing

Is there any reason it is in plural?

baby-names-react/src/App.js

Line 13 in d8643ba

const [names, setName] = useState('')

It would be great to see "Level 4 challenge" implemented 😉

Active gender button doesn't appear active

According to the exercise,

The buttons should operate as "radio" buttons - exactly one should be active at any time.

The app should make it clear which filter is in effect.

Something as subtle as in the exercise example would do:

Clicking on <All> removes all the names

Instead, all the names (that are filtered by the input box) should be shown.

baby-names-react/src/All.js

Lines 3 to 14 in d8643ba

	const All = (props) => {
	const imageClick = () => {
	props.setBabyName (props.data.filter( item => item.sex === 'f' && item.sex === 'm'))
	}
	return (
	<div>
	<img className="icons" src='https://f0.pngfuel.com/png/371/784/two-baby-girl-and-boy-illustration-png-clip-art.png'
	onClick = {() => imageClick()} height="80" alt=''>
	</img>
	</div>
	)
	}

<Girl>, <All> and <Boy> shouldn't need to access `data` or `setBabyName`

baby-names-react/src/App.js

Lines 38 to 40 in d8643ba

	<Girl data={data} setBabyName={setBabyName} />
	<All data={data} setBabyName={setBabyName} />
	<Boy data={data} setBabyName={setBabyName} />

Filtering by gender and searching don't work at the same time

How to reproduce the bug:

1. Filter by female.
2. Search for "Abdul", it will appear but it shouldn't (it's not a female name)

Favourite names reappear sometimes

How to reproduce the bug:

1. Click on a name "Aashi", the name is marked as favourite
2. Click on the All or Female gender button, "Aashi" appears back in the list of (non-favourite) names. Same happens if you search by "Aashi" instead.