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

March 16, 2022

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;

>Solution :

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>
    );
};