How to filter search into array I added into API I was fetched

1

I made Search to filter from API . I added tags component to add tags to an API I searched. How can I search for tags to filter from API Which has the same tag I search
https://codesandbox.io/s/amazing-smoke-p4v78?file=/src/components/CreateTags.js

2

You can move the state up from the CreateTags component to the parent component that has the search logic.

You would then pass down the data and function as props to the CreateTags component (i.e. lifting state up).

3

But now I have the search logic in the Students component and the direct parent for createTag is Student

4

Hey there,

there is a great write-up in the React docs about this:

It’s very good advice to create a (tree) diagram of your components and their state.

In your current situation, you have to lift your state up two times.

From CreateTags to Student to Students to finally fetch the data.

That’s why there is the Context:

1 Like
5

You are right, but please I need more clarification I am still confused because the search tag process in CreateTag.js.

And I fetched the API data in the Students.js component while the Student.js component is in the Students.js

And the tag I made is inside the State that exists in CreateTag.js.

And the CreateTag.js is inside the Student.js component.

The tree components are: Students.js => Student.js => CreateTag.js

6

Hey there,

so first I think we have to clear up some stuff:

  1. In Student, there is a component CreateTags. When I click on the first student’s + and add a tag and reload the page, the tag is gone. So you first have to add a function that saves the tag in the database.

  2. In Students, there is a search by name form. You need to create a function that uses the input of the form and filters the API by this input.

  3. In Students, there is also a search by tag form. You need to create a function that uses the input of the form and filters the API by this input.

Is this correct or do I get something wrong about the functionalities of your application? Please correct me if I’m wrong.

7

Yes, that is exactly what I am need.

8

Alright,

so what’s your next step to solve #1 ?

9

I think I have to use something like firebase. Right?

1 Like
10

Is this not some sort of assessment challenge? The API you are calling makes me think it is part of something hatchways.io has going on.

What are the requirements for the project?

It does seem like an app that would benefit from a backend (MERN or whatever), however, if that is not the point of the challenge and everything has to be client-side, then it’s a moot point.

11

Yes it was an assessment , and I made almost of it by javascript. But I did not pass it because the same point. now I make it as challenge with react.
Do you mean I suppose to use MongoDB as a backend?

12

Not really because you don’t have control over the backend. If you had made the backend including the API you are calling, then yes you would likely use something like Express and MongoDB and add the tags to the users in the DB. But that is not what is going on. You are fetching from an API you have no control over.

That is why I asked for the requirements of the challenge, so we can better understand the scope of this project.

If it is all just client-side, you have to add the tag data to the users state data (or it needs to live near it) after having fetched it. It doesn’t matter if you use context you still have to lift the state and functions up as high as you need to and then pass them down to the child components (or use the context you are providing).

You can also have a look at some state management libraries like Redux, MobX, etc. But that will just move the complexity elsewhere, especially if you now have to learn some new technology. It may make using the data more convenient, but it will still introduce new complexity.