Skip to main content

function Calculator(props){

const show = () =>{
    let number = document.querySelector('.button');
    setAnswer(answer+ number.innerHTML)
};
const [answer,setAnswer] = useState('');

return(
    <div className="component">
        <div className="calculator-component">
            <div className="calculator-component-answer">
                {answer}
            </div>
            <div className="calculator-component-conteiner">
                <div className="row">
                    <button onClick={show} className="button">1</button>
                    <button onClick={show} className="button">2</button>
                    <button onClick={show} className="button">3</button>
                    <button onClick={show} className="button">+</button>
                </div>
            </div>
        </div>
    </div>
);  

};

export default Calculator;

function Calculator(props){

    const show = () =>{
        let number = document.querySelector('.button');
        setAnswer(answer+ number.innerHTML)
    };
    const [answer,setAnswer] = useState('');

    return(
        <div className="component">
            <div className="calculator-component">
                <div className="calculator-component-answer">
                    {answer}
                </div>
                <div className="calculator-component-conteiner">
                    <div className="row">
                        <button onClick={show} className="button">1</button>
                        <button onClick={show} className="button">2</button>
                        <button onClick={show} className="button">3</button>
                        <button onClick={show} className="button">+</button>
                    </div>
                </div>
            </div>
        </div>
    );  
};

export default Calculator;

function Calculator(props){

const show = () =>{
    let number = document.querySelector('.button');
    setAnswer(answer+ number.innerHTML)
};
const [answer,setAnswer] = useState('');

return(
    <div className="component">
        <div className="calculator-component">
            <div className="calculator-component-answer">
                {answer}
            </div>
            <div className="calculator-component-conteiner">
                <div className="row">
                    <button onClick={show} className="button">1</button>
                    <button onClick={show} className="button">2</button>
                    <button onClick={show} className="button">3</button>
                    <button onClick={show} className="button">+</button>
                </div>
            </div>
        </div>
    </div>
);  

};

export default Calculator;

function Calculator(props){

    const show = () =>{
        let number = document.querySelector('.button');
        setAnswer(answer+ number.innerHTML)
    };
    const [answer,setAnswer] = useState('');

    return(
        <div className="component">
            <div className="calculator-component">
                <div className="calculator-component-answer">
                    {answer}
                </div>
                <div className="calculator-component-conteiner">
                    <div className="row">
                        <button onClick={show} className="button">1</button>
                        <button onClick={show} className="button">2</button>
                        <button onClick={show} className="button">3</button>
                        <button onClick={show} className="button">+</button>
                    </div>
                </div>
            </div>
        </div>
    );  
};

export default Calculator;
Origen Enlace

De que manera consigo un valor innerHTML en React?

Esto es una calculadora sencilla, comencé con React hace poco y se que la utilidad de la misma es para no trabajar directamente con el DOM, pero tengo este problema.

function Calculator(props){

const show = () =>{
    let number = document.querySelector('.button');
    setAnswer(answer+ number.innerHTML)
};
const [answer,setAnswer] = useState('');

return(
    <div className="component">
        <div className="calculator-component">
            <div className="calculator-component-answer">
                {answer}
            </div>
            <div className="calculator-component-conteiner">
                <div className="row">
                    <button onClick={show} className="button">1</button>
                    <button onClick={show} className="button">2</button>
                    <button onClick={show} className="button">3</button>
                    <button onClick={show} className="button">+</button>
                </div>
            </div>
        </div>
    </div>
);  

};

export default Calculator;