REACT: How to update the value of an input field

[codinggerben]

Hello,

I have a problem. I have a search field as an input field. Someone can type in their search query and the cards get updated. All cards are related to a category. Now I want to add the feature that when I click on the category from a card, that this value is passed to the search input field, so that all cards related to this category are displayed.

App.js

import React, {useEffect, useState} from 'react';
import Card from './components/Card'
import './App.css';

export function buttonClick(category = "")  {
    let buttonSearch = category;
    console.log(buttonSearch);
}

function App() {

    const [cards, setCards] = useState([]);

    const [search, setSearch] = useState("");

    const updateSearch = (e: any) => {
        setSearch(e.target.value);
        console.log(search);
    };

    useEffect(()  => {
        getCards();
    }, [search]);

    async function getCards() {
        const response = await fetch(`https://*********-codingchallenge.azurewebsites.net/v2/article?search=${search}`, {method: 'Get'});
        const data = await response.json();
        setCards(data.records);
        console.log(data.records);
    }

    return (
      <div className="App">
          <div className="App-header">
              <span className="span">
                  Knowledge Base
              </span>
              <div>
                  <input placeholder="Suchen…" className="App-search" type="text" value={search} onChange={updateSearch} />
              </div>
          </div>
          <div className="content">
              <div className="content-card">
                  {cards.map(card => (
                      <Card
                          key={card['id']}
                          title={card['fields']['title']}
                          teaser={card['fields']['teaser']}
                          category={card['fields']['category']}/>
                  ))}
              </div>
          </div>
      </div>
  );
}

export default App;

Card.js

import React from 'react';
import cardCss from './card.module.css'
import {buttonClick} from '../App'

const Card = ({title = "", teaser = "", category = ""}) => {

    return (
        <div className={cardCss.card} title={title}>
            <div>
                <h1 className={cardCss.cardTitle}>{title}</h1>
                <div>
                    <button className={cardCss.button} onClick={() => buttonClick(category)}>{category}</button>
                </div>
                <div className={cardCss.teaser}>{teaser}</div>
            </div>
        </div>
    );
}

export default Card;

[jenovs]

You should pass buttonClick functions as a prop to Card instead of importing/exporting. And the buttonClick itself should be inside the App and perform filtering/fetching/whatever and changing the state of the App.

[codinggerben]

Thanks for your reply. But I’m sorry. I don’t get it. I have everything I need finished. I just adjusted the CSS. However, the code is complete, except for the function to pass the value when the button category is clicked, to the search field to get all the related articles. Can you give me a more detailed hint?

App.js

import React, {useEffect, useState} from 'react';
import Card from './components/Card'
import './App.css';
import cardCss from "./components/card.module.css";

function App() {

    const [cards, setCards] = useState([]);
    const [search, setSearch] = useState("");
    const [loading] = useState(false);

    const updateSearch = (e: any) => {
        setSearch(e.target.value);
    };

    useEffect(()  => {
        getCards();
    }, [search]);

    const getCards =  async () => {
            const response = await fetch(`https://orgavision-codingchallenge.azurewebsites.net/v2/article?search=${search}`);
            const data = await response.json();
            setCards(data.records);
    }

    return (
        <div className="App">
            <div className="App-header">
              <span className="span">
                  Knowledge Base
              </span>
                <div>
                    <input placeholder="Suchen…" className="App-search" type="text" value={search} onChange={updateSearch} />
                </div>
            </div>
            <div className="content">
                <div className="content-card">
                    {cards.map(card => (
                        <Card
                            key={card['id']}
                            title={card['fields']['title']}
                            teaser={card['fields']['teaser']}
                            category={card['fields']['category']}
                        />
                    ))}
                    {loading ? (cards) :
                        <div className={cardCss.card} title={"placeholder"}>
                            <div>
                                <h1 className={cardCss.cardTitle}>{""}</h1>
                                <div className={cardCss.teaser}>{""}</div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    );
}

export default App;

Card.js

import React from 'react';
import cardCss from './card.module.css'

const Card = ({title = "", teaser = "", category = ""}) => {

  const updateSearch = ( category = "") => {
      console.log(category);
  }

  return (
      <div className={cardCss.card} title={title}>
          <div>
              <h1 className={cardCss.cardTitle}>{title}</h1>
              <div>
                  <button className={cardCss.button} onClick={() => updateSearch(category)}>{category}</button>
              </div>
              <div className={cardCss.teaser}>{teaser}</div>
          </div>
      </div>
  );
}

export default Card;```

[jenovs]

Here is an example:
https://codepen.io/jenovs/pen/VwmNvOW?editors=0010

It’s actually pretty basic React stuff, you probably should check some tutorial.

[codinggerben]

Thank you so much. It´s easy to do it. I have to change some things in Card.js. And I thought to complicated.

import React from 'react';
import cardCss from './card.module.css'

class Card extends React.Component<{ title: string, teaser: string, category: string, onFilter: any }> {
    static defaultProps = {title: "", teaser: "", category: ""}

    render() {
        let {title, teaser, category, onFilter} = this.props;

        return (
            <div className={cardCss.card} title={title}>
                <div>
                    <h1 className={cardCss.cardTitle}>{title}</h1>
                    <div>
                        <button className={cardCss.button} onClick={() => onFilter(category)}>{category}</button>
                    </div>
                    <div className={cardCss.teaser}>{teaser}</div>
                </div>
            </div>
        );
    }
}

export default Card;