How to use variables in a function thats uses return

I have created a table that appears when its done loading:

 {this.state.tableLoading ? this.Tableloading() : this.TableSection()}

the table function:

TableSection = () => {
        return (
            <div>
 //  I want to acces FilterTrue and Filterfalse here 
              <div id="filtersection" style={this.state.filters ? this.render.FilterTrue : this.render.Filterfalse}>
</div>

                    <table id="ProductTable">
                        <thead>
                            <tr>
                                <th>Nr.</th>
                                <th>Title</th>
                                <th>Price</th>
                                <th>description</th>
                                <th>Quantity</th>
                                <th>file</th>
                                <th>Edit</th>

                            </tr>
                        </thead>
                        <tbody>
                            {this.state.allproducts.map(allproducts =>

                                <tr key={allproducts.id}>
                                    <td>{this.state.ProductCount++} </td>
                                    <td>{allproducts.title}</td>
                                    <td>{allproducts.price}</td>
                                    <td>{allproducts.description}</td>
                                    <td>{allproducts.quantity}</td>
                                    <td>{allproducts.filePath}</td>
                                    <td width="250"> <div id="buttonsection">
                                        <button id="deletebutton" onClick={() => this.deleteProduct(allproducts.id)}>Delete</button>
                                        <button id="editbutton" onClick={() => this.deleteProduct(allproducts.id)}>Edit</button>
                                        <button id="viewbutton" onClick={() => this.showView(allproducts.id)}>Show</button>
                                    </div>
                                    </td>

                                </tr>
                            )}
                        </tbody>
                 
                    </table>
                </div>
               
            )
    }

render variables that i want to acces:

 render() {
  const FilterTrue = {
            opacity: "1",
            height: "auto"
        }

        const Filterfalse = {
            opacity: "0",
            height: "0px"
        }
return ( 
{this.state.tableLoading ? this.Tableloading() : this.TableSection()}
)}

how can i acces “Filterfalse” and “FilterTrue” in the “TableSection”

Again, as I’ve said repeatedly, I think you would save yourself a lot of hassle if you reviewed some basic JS. Might I suggest FCC? We have a lesson that covers that exact topic.

Thank you, I understand what you mean, but if i learn everything at once I already forget 50% at the time i begin a project. i learn the fastest by starting and looking up on the internet when i cant get further, and in some cases I cant find the solution.
by now i already understand Reactjs for the large parts, just some small things that i cant get past sometimes :grinning_face_with_smiling_eyes:
but thanks once again.

I’m not saying that you should learn everything at once. I’m saying you should learn the fundamentals first. I’m saying that you should learn your alphabet before you try to write a book.

by now i already understand Reactjs for the large parts, just some small things that i cant get past sometimes

I might suggest that more is getting past than you realize and that it will hamper your development.

i learn the fastest by starting and looking up on the internet when i cant get further, and in some cases I cant find the solution.

I would love to see what searches you did that you couldn’t find how to pass variables into a function in JS. Just searching for “javascript how to pass a variable to a function” I got over 52M hits. But instead you seem to have gotten the habit of taking advantage of the helpful nature of people on the forum, asking for personal explanations for each little basic thing.

Again, I highly recommend working on some fundamentals. I’ve worked with a few developers that learn like you are suggesting - ignoring fundamentals, just having fun building things. I can’t remember a single one that wasn’t a nightmare to work with.

You are going to teach yourself a lot of bad habits and be blind to holes in your knowledge.

One example - How many times have I told you not to use PascalCase for variables that aren’t a class or an object creator? It is confusing to people that are familiar with the fundamentals and standard practice of JS.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.