有没有办法将输入占位符设置为反应中的道具？

Question

I'm intending to have different values for input placeholder as I route to different pages. Is it possible to set an attribute as a props?

Below is my code for Search module or component, where the placeholder I'd like to use as props exist.

export default function Search(props) {
  return (
    <div className={styles.container}>
      <FontAwesomeIcon icon={faSearch} />
      <input type="text" placeholder={props.search} />
    </div>
  );
}

This Search component is used in another component before it's rendered in App.js.

export default function Page({ data, setModalVisibleState, }) {
  const addButtonHandler = () => {
    setModalVisibleState(true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.titleBox}>
        <FontAwesomeIcon icon={faGraduationCap} />
        <p>{data.title}</p>
        <Button size="normal" shape="squared" color="blue" onClick={addButtonHandler}>{data.button}</Button>
      </div>
      <div className={styles.menuBox}>
        <ul>
          {data.menu.map((v, i) => (
            <li key={i}>
              <BodaSelect name={v} />
            </li>
          ))}
        </ul>
        <Search search={search} />
      </div>
...

Finally, this is the App.js where I'd like to set the value for placeholder as I route each page.

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  const [modalVisibleState, setModalVisibleState] = useState(false);

  return (
    <div className="App">
      <Router>
        <Sidebar />
        {modalVisibleState ? (
          <Modal setModalVisibleState={setModalVisibleState} />
        ) : (
          ""
        )}
        <Switch>
          <Route path="/assignment">
            <Page
              search="search assignments"
              data={{
                menu: ["class A"],
                title: "assignment",
                button: "Add a new assignment",
                table: ["Date", "Textbook", "Content"],
                tableData: [
                  ["2021/03/31",
                    "English 101",
                    "Assignment guideline",
                  ],
                  ["2021/03/28",
                    "Maths 101",
                    "Assignment details",
                  ],
                ],
              }}
              setModalVisibleState={setModalVisibleState}
            />
          </Route>
          <Route path="/">
            <Page
              search="search students"
              data={{
                menu: ["All schools", "All grades", "All classes", "All homeroom teachers"],
                title: "student",
                button: "Add a new student",
                table: ["Students", "Grades", "Schools", "Homeroom teachers", "Classes"],
                tableData: [
                  [
                    "Lisa Parker",
                    "12",
                    "Orange High School",
                    "Kate Lee",
                    "Orange Juice Class · Orange Farming Class · Mango Class",
                  ],
                ],
              }}
              setModalVisibleState={setModalVisibleState}
            />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

If it's not possible to set placeholder as props, would there be a way to set placeholder value variable?

Thank you for your help.

Answer 1

yes. It is possible to set placeholders as props. Everything you do fine. But I saw you don't declare props `search in Page component. You need to add this props:

export default function Page({ data, setModalVisibleState, search}) {...