React Button Component doesn't render the label inside the button-CodePudding

I'm creating a simple React App and I've stumbled upon something I can't solve. I've created a button component which I've exported like any other component. At the moment, I've imported the Button component in my main part because I need two buttons

The problem is that the labels won't render so i have 2 plain buttons..

The label the button should show is Search

Any fixes?

The Button component

import React from 'react';
import './Button.css';

const Button = ({state = "active"}) => {
    return (
        <button className={`.btn--${state}`}></button>
    );
};

export default Button;

My Main component

import React from 'react';
import './Input.css';
import { useState } from 'react';
import Button from '../Button/Button';

const Input = () => {

    const [value, setValue] = useState("");

    const SearchButton = (e) => {
        e.preventDefault();
        console.log("click");
    };

    const ResetButton = (e) => {
        e.preventDefault();
        setValue("");
    };

    return (
        <main>
        <form className='inputfield'>
            <h2 className='input-text'>Zoek een Github user</h2>
            <div className='input'>
            <input className='search' type='text' placeholder='Typ hier een gebruikersnaam...' value={value} onChange={(e) => setValue(e.target.value)}></input>
                <div className='button-field'>
                    <Button  state="inactive" className='search-now' onClick={SearchButton}>Search</Button>
                    <Button className='reset' onClick={ResetButton}></Button>
                </div>
            </div>
        </form>
        </main>
    );
};

export default Input;

CodePudding user response：

You have two straight forward ways of this doing what you want.

The first solution would be to use children React Docs Here

Your button then would look like:

const Button = ({state = "active"}) => {
    const {children} = props
    return (
        <button className={`.btn--${state}`}>{children}</button>
     );
};

A second approach is to pass the Value through props to the component.

<Button 
    state="inactive" 
    className='search-now' 
    onClick={SearchButton} 
    textValue={"Search"} />
// Button
const Button = ({state = "active"}) => {
    const {textValue} = props
    return (
        <button className={`.btn--${state}`}>{textValue}</button>
    );
};