reactの条件分岐がうまく実装できない

Question

前提・実現したいこと

Reactを使っ他簡単なアプリケーションを作っています。
Main.jsxのtoggleSmileをImage.jsxで実行し、条件分岐を使用して5で割れる場合（ture）は「５で割れる」を出力し,割れない場合(false)は「５で割れない」を出力したいと思っています。
しかし、常に「５で割れない」が出力している状態です。
カウントのプラス、マイナスの実装、カウントの表示は正常にできています。

Image.jsxの中に書いてある
// テスト検証
の条件分岐はうまく実装できています。

個人的にはMain.jsxの中に書いてあるtoggleSmile=()関数の受け渡しがうまくできていないと考えています。

該当のソースコード

以下はsrcディレクトリないの関係していると思われるファイルです。indexはjs拡張子です。それ以外のファイルの拡張子は.jsxです。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
// import Blog from './blog';
import Main from './Main';
import reportWebVitals from './reportWebVitals';


ReactDOM.render(
  <React.StrictMode>
    <Main />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

import React from 'react';
import Number from './Number';



class Main extends React.Component{
    constructor(props){
        super(props);
        this.state={
            count:0,
            isSmile:false
        }
    }

    addCount = ()=>{
        this.setState({
            count : this.state.count+1
        });
    }
    downCount = ()=>{
        this.setState({
            count : this.state.count-1
        });
    }
    toggleSmile=()=>{
        if(this.state.count%5 === 0){
            this.setState({
                isSmile:true
            })
        }else{
            this.setState({
                isSmile:false
            })
        }
    }
    render(){
        return(
            <>
                <Number
                    count = {this.state.count}
                    add ={()=>{this.addCount()}}
                    down ={()=>{this.downCount()}}
                    toggle = {()=>{this.toggleSmile()}}
                />
            </>
        )
    }
}

export default Main;

import React from 'react';
import Number from './Number';



class Main extends React.Component{
    constructor(props){
        super(props);
        this.state={
            count:0,
            isSmile:false
        }
    }
    

    addCount = ()=>{
        this.setState({
            count : this.state.count+1
        });
    }
    downCount = ()=>{
        this.setState({
            count : this.state.count-1
        });
    }
    toggleSmile=()=>{
        if(this.state.count%5 === 0){
            this.setState({
                isSmile:true
            })
        }else{
            this.setState({
                isSmile:false
            })
        }
    }

    render(){
        return(
            <>
                <Number
                    count = {this.state.count}
                    add ={()=>{this.addCount()}}
                    down ={()=>{this.downCount()}}
                    toggle = {()=>{this.toggleSmile()}}
                    isSmile = {this.state.isSmile}
                />
            </>
        )
    }
}

export default Main;

import React from 'react';
import Image from './Image';

const Number = (props) => {
    return(
        <>
            <Image
                count = {props.count}
                toggle = {props.toggle}
            />
            <h2>{props.count}</h2>
            <br/>
            <div className="boxInner">
                <div className="btn" onClick = {()=>props.add()}>プラス</div>
                <div className="btn" onClick = {()=>props.down()}>マイナス</div>
            </div>
        </>
    )
};
export default Number;

import React from 'react';
import Image from './Image';

const Number = (props) => {
    return(
        <>
            <Image
                count = {props.count}
                isSmile = {props.isSmile}
            />
            <h2>{props.count}</h2>
            <br/>
            <div className="boxInner">
                <div className="btn" onClick = {()=>{props.add();props.toggle()}}>プラス</div>
                <div className="btn" onClick = {()=>{props.down();props.toggle()}}>マイナス</div>
                
            </div>
        </>
    )
};
export default Number;

import React from 'react';


const Image = (props) => {
    // テストコードです。
    console.log(props.toggle);
    // テスト検証
    const name = "foo"
    return(
        <>
            <div className="img">
                {(() => {
                    if (props.toggle === true) {
                        return <span>5で割れる</span>
                    } else {
                        return <span>５で割れない</span>
                    }
                })()}
                <br/>
                {/* テスト検証 */}
                {(() => {
                    if (name === "goo") {
                        return <span>fooです</span>
                    } else {
                        return <span>fooでないです</span>
                    }
                })()}
            </div> 
        </>
    )
};
export default Image;

import React from 'react';


const Image = (props) => {
    return(
        <>
            <div className="img">
                {(() => {
                    if (props.isSmile === true) {
                        return <span>5で割れる</span>
                    } else {
                        return <span>５で割れない</span>
                    }
                })()}
            </div> 
        </>
    )
};
export default Image;

補足情報（FW/ツールのバージョンなど）

開発環境はcreate react appを使用しています。
edited~と言うファイルは変更後のファイルです。Mainはreturn内でpropsのisSmileを追加。Number.jsxではonClickの関数追加。
Image.jsxでは条件分岐の条件変更。

Answer 1

<Number>でtoggleとして渡しているものは、()=>{this.toggleSmile()}という関数です。それが<Image>まで伝わってきていますので、trueとは一致しません。

条件分岐が動かないのではなく、渡している値が正しくないようです。

Comments

[aku424tt]

回答ありがとうございます。
()=>{this.toggleSmile()}という関数を<Image>まで伝えて、条件分岐で関数の返り値を比較するように記述したつもりだったのですが、この記述では何が間違えているのでしょうか。

[maisumakun]

> 条件分岐で関数の返り値を比較するように記述したつもりだったのですが

この形では、「関数そのもの」とtrueを比較しています。当然、一致しません。

[aku424tt]

返信ありがとうございます。

なるほど、理解しました。
でしたら、props の isSmile を Image.jsxまで伝えて、trueと比較すれば良いと言うことでしょうか?

[aku424tt]

大変お迷惑をおかけいたしました。
やっと解決できました。
関数ではなく。propsを条件に入れたことによって解決できました。

本当にありがとうございました。

Answer 2

Image.jsxでtoggleSmile()の返り値を比較していますね。

if (props.toggle === true) {}

一方、toggleSmile内ではisSmileを更新するだけなので、常にfalseになってしまっているのかと考えられます！

    toggleSmile=()=>{
        if(this.state.count%5 === 0){
            this.setState({
                isSmile:true
            })
        }else{
            this.setState({
                isSmile:false
            })
        }
    }

Comments

[aku424tt]

回答ありがとうございます。
Image.jsxでtoggleSmile()の返り値を比較したくてこのような記述をしました。toggleSmile()の返り値がtrueかfalseか比較して表示を変えたいと考えていました。

仰っていた通り常にfalseになっています。

isSmileの値は変更されているが変更された値ではなく関数自体が比較されてしまっていると言うことでしょうか。まだ、勉強不足で十分理解ができていませんのでご教授いただけると幸いです。

[aku424tt]

大変お迷惑をおかけいたしました。

条件分岐の条件を関数ではなく、popsのisSmileに変更して解決できました。
解決のために他にも変更した点がありますので、興味がありましたら、ご確認お願いします。

ありがとうございました。